CSS盒子模型

1. 盒子模型的介绍

1.1 盒子模型的介绍

盒子的概念

1. 页面中的每一个标签，都可看做是一个 “盒子” ，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子

盒子模型
CSS 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） 构成，这就是 盒子模型

示例：

代码：

效果：

2. 内容区域的宽度和高度

2.1 内容的宽度和高度

作用： 利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性： width / height

常见取值： 数字+px

示例：

代码：

效果：

3. 边框（ border ）

3.1 边框（border） - 单个属性

作用： 给设置边框粗细、边框样式、边框颜色效果

单个属性：

3.2 边框（border） - 连写形式

属性名： border

属性值：单个取值的连写，取值之间以空格隔开

• 如： border : 10px solid red;

快捷键： bd + tab

3.3 边框（border） - 单方向设置

场景： 只给盒子的某个方向单独设置边框

属性名： border - 方位名词

属性值： 连写的取值

示例：

代码：

效果：

3.4 盒子实际大小初级计算公式

盒子实际大小初级计算公式：

• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框

示例：

代码：

效果：

4. 内边距（ padding ）

4.1 内边距（padding） - 取值

作用： 设置 边框 与 内容区域 之间的距离

属性名： padding

常见取值：

记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

4.2 内边距（padding） - 单方向设置

场景： 只给盒子的某个方向单独设置内边距

属性名： padding - 方位名词

属性值： 数字 + px

4.3 盒子实际大小终极计算公式

盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

4.5 CSS3盒模型（自动内减）

自动内减

• 操作：给盒子设置属性 box-sizing : border-box ; 浏览器会自动计算多余大小，自动在内容中减去

示例：

代码：

效果：

示例：

代码：

效果：

5. 外边距（margin）

5.1 外边距（margin） - 取值

**作用：**设置边框以外， 盒子与盒子之间的距离

属性名： margin

常见取值：

记忆规则： 从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

5.2 外边距（margin） - 单方向设置

场景： 只给盒子的某个方向单独设置外边距

属性名： margin - 方位名词

属性值： 数字 + px

5.3 margin单方向设置的应用

5.4 清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置

• 比如： body标签默认有margin： 8px
• 比如： p标签默认有上下的margin
• 比如： ul标签默认由上下的margin和padding-left
• ……

解决方法：

5.6 外边距正常情况

场景： 水平布局 的盒子，左右的margin正常，互不影响
结果： 最终两者距离为左右margin的和

5.7 外边距折叠现象 – ① 合并现象

场景： 垂直布局 的 块级元素，上下的margin会合并

结果： 最终两者距离为margin的最大值

**解决方法：**避免就好
• 只给其中一个盒子设置margin即可

5.8 外边距折叠现象 – ② 塌陷现象

场景： 互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

结果： 导致父元素一起往下移动

解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow： hidden
3. 转换成行内块元素
4. 设置浮动

5.9 行内元素的margin和padding无效情况

场景： 给行内元素设置margin和padding时

结果：

1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

示例：

代码：

效果：

示例：

代码：

效果：

示例：

代码：

效果：

示例：

代码：

效果：

示例：

代码：

效果：

示例：

代码：

效果：