CSS 盒子模型

块盒与行盒

块盒的行为：

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”

行盒的行为：

• 盒子不会产生换行。
• width 和 height 属性将不起作用。
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

行内块盒

使用 display: inline-block; 定义行内块盒。

行内块盒的行为：

• 设置width 和height 属性会生效。
• padding, margin, 以及border 会推开其他元素。

内部和外部显示类型

1. 盒子模型有一个外部显示类型，来决定盒子是块级还是内联。

2. 盒子模型还有内部显示类型，它决定了盒子内部元素是如何布局的。

   display: flex; 会将盒子的内部显示类型变为 flex 类型，其内的子元素都会成为 flex 元素。

盒子模型的组成

• Content box
• Padding box
• Border box
• Margin box

标准盒模型

浏览器默认使用标准盒模型。

如果给一个块盒设置 width 和 height，实际上设置的是 Content box。另外再加上 padding、border 的值，才是盒子真正的大小。

可以通过为其设置 box-sizing: content-box; 来指定使用标准盒模型。

替代盒模型

如果给一个块盒设置 width 和 height，实际上设置的是 Border box。该值就是盒子的正真大小。

可以通过为其设置 box-sizing: border-box; 来指定使用替代盒模型。

外边距

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。

外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

外边距折叠

外边距折叠的计算规则

1. 如果边距都是正数，或都是负数，则取其中绝对值最大者。

2. 如果边距有正数也有负数，则取绝对值最大的正数与绝对值最大的负数之和。

   🌰：如果有 -10px 30px 叠在一起，折叠后的值就是 20px。

外边距折叠的三种情况

1. 同一层相邻元素之间

   相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix 清除浮动。

2. 没有内容将父元素和后代元素分开

   如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；

   或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom；

   则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

3. 空的块级元素

   当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。

   这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为 inline 或是加上clear-fix的时候。

边框

如果使用标准盒模型，边框的大小将添加到框的宽度和高度。

如果使用替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。

内边距

内边距不能是负数。