【八股系列】CSS盒模型:掌握网页布局的核心

🎉 博客主页:【剑九 六千里-CSDN博客】
🎨 上一篇文章:【Vue中的<keep-alive>组件:深入解析与实践指南】
🎠 系列专栏:【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

在这里插入图片描述

在这里插入图片描述

文章目录

  • 1. 盒模型的构成
  • 2. 盒模型的类型
    • 2.1 标准盒模型(Content Box)
    • 2.2 IE盒模型(Border Box)
  • 3. 盒模型之间的转换

引言:
在网页设计与开发的世界里,CSS盒模型扮演着至关重要的角色。它是理解和控制网页元素布局的基础,无论是初学者还是资深开发者,深入理解盒模型都是必不可少的技能。本文将带你深入了解CSS盒模型的构成、工作原理以及如何巧妙运用它来构建优雅的网页布局。

1. 盒模型的构成

每个HTML元素在浏览器中都被视为一个矩形盒子,而CSS盒模型定义了这个盒子的各个组成部分及其如何相互作用。一个典型的盒模型由四个关键部分组成:

  • Content(内容区):这是元素的核心,包含了所有的文本、图片或嵌套的其他HTML元素。内容区的尺寸通常由元素的widthheight属性决定。

  • Padding(内边距):位于内容区和边框之间,用于增加元素内部的空间,使内容与边框保持一定的距离。内边距可以通过设置padding属性来调整。

  • Border(边框):围绕内容区和内边距的边界线,可以设定颜色、宽度和样式。边框的定义由border属性控制。

  • Margin(外边距):元素边框与其他元素之间的空间,用于控制元素间的距离。外边距由margin属性定义。

2. 盒模型的类型

2.1 标准盒模型(Content Box)

标准盒模型中,元素的宽度和高度仅指内容区域的尺寸。内边距、边框和外边距不包含在元素的 widthheight 中,而是额外添加到元素的总尺寸上。

描述图示:

  1. 内容区:这是元素的实际内容,如文本或图像。
  2. 内边距:内容区和边框之间的空间。
  3. 边框:围绕内容和内边距的线条。
  4. 外边距:边框和其他元素之间的空间。
+---------------------+
|                     |
|    +-------------+  |
|    |             |  | <-- 内边距
|    |     Content|  |
|    |             |  |
|    +-------------+  |
|                     |
+---------------------+
                    | |
                    | | <-- 边框
                    | |
+---------------------+
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
+---------------------+ <-- 外边距

在这里插入图片描述

2.2 IE盒模型(Border Box)

IE盒模型中,元素的 widthheight 包括了内容、内边距和边框的尺寸。这意味着如果修改了内边距或边框,元素的总尺寸不会改变。
描述图示:

  1. 内容区:元素的实际内容。
  2. 内边距:包含在元素的 widthheight 中。
  3. 边框:也包含在元素的 widthheight 中。
  4. 外边距:边框和其他元素之间的空间,不包含在元素的尺寸中。
+---------------------+
|                     |
|    +-------------+  |
|    |             |  | <-- 内边距和边框都包含在width和height中
|    |     Content|  |
|    |             |  |
|    +-------------+  |
|                     |
+---------------------+
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
+---------------------+ <-- 外边距

在这里插入图片描述

3. 盒模型之间的转换

从上面我们得知,标准W3C盒模型设置borderpadding会撑大盒子本身的宽度,因此对于布局来说会有很大的误差,因此在CSS中,可以通过box-sizing属性来控制盒模型的行为。box-sizing属性有两个主要的值:

  1. content-box:这是默认值,代表标准盒模型。
  2. border-box:代表IE盒模型,其中widthheight包括内容、内边距和边框。

示例
假设有一个元素,我们想要在标准盒模型和IE盒模型之间进行转换:

/* 标准盒模型 */
div {
  box-sizing: content-box; /* 默认就是标准盒模型,这行代码可以不用加 */
  width: 200px; /* 仅内容区的宽度 */
  padding: 10px; /* 内边距 */
  border: 5px solid black; /* 边框 */
}

/* IE盒模型 */
div {
  box-sizing: border-box;
  width: 200px; /* 包括内容区、内边距和边框的总宽度 */
  padding: 10px; /* 内边距 */
  border: 5px solid black; /* 边框 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/803334.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

夏日狂欢水上漂流的爆笑奇遇记

【夏日狂欢&#xff0c;水上漂流的爆笑奇遇记 —— 月亮姐姐的“睫毛漂流记”】在这个炎炎夏日&#xff0c;当烈日炙烤着大地&#xff0c;每一寸空气弥漫着对清凉的渴望时&#xff0c;一场别开生面的“暑期嘉年华”正悄然掀起一场水上狂欢的浪潮。而在这场盛宴中&#xff0c;月…

FPGA实训报告DAY 1(Verilog HDL)

实习日志与总结 日期&#xff1a;2024 年 7 月 10 日 星期三 姓名&#xff1a;XXX 一、实习日志 上午 9:00 - 9:30 按时到达工位&#xff0c;参加部门早会&#xff0c;了解了今天的实习任务和目标&#xff0c;即初步学习 FPGA 简介和 Verilog 基础语法知识。 9:30 - 10:30…

springboot 集成minio,启动报错

springboot 集成 minio 8.5.10 报错 *************************** APPLICATION FAILED TO START *************************** Description: An attempt was made to call a method that does not exist. The attempt was made from the following location: io.minio.S3Base.…

在mybatis-plus中关于@insert注解自定义批处理sql导致其雪花算法失效而无法自动生成id的解决方法

受到这位作者的启发 > 原文在点这里 为了自己实现批量插入&#xff0c;我在mapper层使用insert注解写了一段自定义sql //自定义的批量插入方法 Insert("<script>" "insert into rpt_material_hour(id,sample_time,rounding_time,cur_month,machine_no…

启智畅想火车类集装箱号码识别技术,软硬件解决方案

集装箱号码识别需求&#xff1a; 实时检测车皮号、火车底盘号码、集装箱号码&#xff0c;根据火车类型分为以下三种情况&#xff1a; 1、纯车皮&#xff0c;只检测车皮号&#xff1b; 2、火车拉货箱&#xff08;半车皮&#xff09;&#xff0c;检测车皮号集装箱号码&#xff1b…

基于springboot和mybatis的RealWorld后端项目实战一之hello-springboot

新建Maven项目 注意archetype选择quickstart pom.xml 修改App.java App.java同级目录新增controller包 HelloController.java package org.example.controller;import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotatio…

拒绝废话:computed、watch和methods的区分和使用场景

computed、watch和methods是用于处理数据和响应数据变化的不同方式&#xff0c;三者之间有什么不同呢&#xff0c;贝格前端工场作为10年前端老司机&#xff0c;用浅显的语言给大家分享一下。 computed&#xff1a; computed属性是用来定义一个基于依赖的响应式属性。它会根据…

QT--控件篇四

一、对话框 在软件开发中&#xff0c;对话框&#xff08;Dialog&#xff09;是一种常见的用户界面元素&#xff0c;用于与用户进行交互和获取信息。它通常以模态或非模态的形式出现&#xff0c;模态对话框会阻止用户与应用程序的其他部分交互&#xff0c;直到对话框关闭为止&a…

Linux热键,shell含义及权限介绍

君子忧道不忧贫。 —— 孔丘 Linux操作系统的权限 1、几个常用的热键介绍1、1、[Tab]键1、2、[ctrl]-c1、3、[ctrl]-d1、4、[ctrl]-r 2、shell命令以及运行原理3、权限3、1、什么是权限3、2、权限的本质3、3、Linux中的用户3、4、Linux中文件的权限3、4、1、快速掌握修改权限的…

排序——归并排序及排序章节总结

前面的文章中 我们详细介绍了排序的概念&#xff0c;插入排序&#xff0c;交换排序与选择排序&#xff0c;大家可以通过下面的链接再去学习&#xff1a; ​​​​​​排序的概念及插入排序 交换排序 选择排序 这篇文章就详细介绍一下另一种排序算法&#xff1a;归并排序以及…

ubuntu 虚拟机扩容

在使用vmware创建的ubuntu虚拟机进行linux开发时&#xff0c;安装了docker容器&#xff0c;编译会占用很大的磁盘空间&#xff0c;不想创建新的更大空间的虚拟机linux系统&#xff0c;可以通过gparted图形化工具进行扩容&#xff0c;以下是操作方法 虚拟机设置&#xff0c;扩展…

k8s核心操作_存储抽象_K8S中使用Secret功能来存储密码_使用免密拉取镜像_k8s核心实战总结---分布式云原生部署架构搭建033

注意在看的时候一定要把 dxxxx中的xxxx换成--o----c----k----e----r 然后我们再来看一个k8s中的secret的功能,这个功能 用来存储密码的,configMap是用来存配置的 比如我们有个pod,他的镜像,如果是需要密码的,那么 我们现在是从公共仓库拉取的,如果我们从私有仓库拉取,有密码…

rust + python+ libtorch

1: 环境&#xff0c;ubuntu 1.1 rust : rust-1.79.0 &#xff08;在官方下载linux版本后&#xff0c;解压文件夹&#xff0c;内部有个install的sh文件&#xff0c;可安装&#xff09; 安装成功测试&#xff1a;cargo --version 1.2 python3.10 (直接使用apt install pytho…

YOLOv8改进 | 检测头 | 融合渐进特征金字塔的检测头【AFPN4】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

【HZHY-AI300G智能盒试用连载体验】RTC示例程序测试

本文首发于&#xff1a;【   】【HZHY-AI300G智能盒试用连载体验】 智能工业互联网网关 - 北京合众恒跃科技有限公司 - 电子技术论坛 - 广受欢迎的专业电子论坛! (elecfans.com) HZHY-AI300G智能盒默认的系统是Ubuntu&#xff0c;这样非常方便使用&#xff0c;接上USB键盘和…

卷积与图像卷积操作

什么是卷积 教材上的卷积公式如下图&#xff1a; 结合经典的水池问题来说明卷积公式&#xff1a; f(t)代表进水量&#xff0c;表示t时刻进入的水量g(x-t)代表排水量&#xff0c;表示t时刻进入的水量&#xff0c;在x时候还剩多少&#xff08;%&#xff09; 上面说的只是特殊情况…

连锁零售门店分析思路-人货场 数据分析

连锁零售门店分析思路 以下是一个连锁零售门店的分析思路&#xff1a; 一、市场与竞争分析 二、门店运营分析&#xff08;销售分析&#xff09; 三、销售与财务分析 四、客户分析 五、数字化与营销分析 最近帮一个大学生培训&#xff0c;就门店销售分析 &#xff0c;说到门店…

实验07 接口测试postman

目录 知识点 1 接口测试概念 1.1为什么要做接口测试 1.2接口测试的优点 1.3接口测试概念 1.4接口测试原理和目的 2 接口测试内容 2.1测什么 2.1.1单一接口 2.1.2组合接口 2.1.3结构检查 2.1.4调用方式 2.1.5参数格式校验 2.1.6返回结果 2.2四大块 2.2.1功能逻辑…

Talk|清华大学袁天远:PreSight - 利用NeRF先验帮助自动驾驶场景在线感知

本期为TechBeat人工智能社区第605期线上Talk。 北京时间7月3日(周三)20:00&#xff0c;清华大学博士生—袁天远的Talk已经准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “PreSight - 利用NeRF先验帮助自动驾驶场景在线感知”&#xff0c;他向大家介绍了新…

【送书活动十期】从零开始node.js制作CLI工具

这篇博客的由来是源于工作中一个java项目的配置项是加密后的私钥&#xff0c;私钥是由其他项目中调用web3生成随机账号得到的&#xff0c;而加密方法只是简单在java项目中执行代码得到。这便导致两步操作有点割裂&#xff0c;需要有一个脚本来完成生成私钥和加密私钥&#xff0…