【CSS】410- 关于CSS盒子模型、BFC及其应用

关于CSS的盒子模型，正确的解释应该是这样的：

把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型.

随便写个 div, 打开 Chrome 的开发者工具, 在右边栏能看到这样一个直观的盒模型图.

这个 div 从外到内被分成了四层, 分别是:

• Margin(外边距) - 清除边框外的区域, 外边距是透明的.
• Border(边框) - 围绕在内边距和内容外的边框.
• Padding(内边距) - 清除内容周围的区域, 内边距是透明的.
• Content(内容) - 盒子的内容, 显示文本和图像等.

box-sizing

盒模型又被分为 IE盒模型 和 W3C标准盒模型 两种类型.

在 IE8+ 的浏览器中要使用哪个盒模型可以由 box-sizing 控制.
默认值为 ​​content-box​​, 即W3C标准盒模型;
如果将 box-sizing 设为 ​​border-box​​ 则用的是IE盒模型.

这两者的区别在于:

1. IE盒模型的盒子大小为 ​​content + padding + border​​.
2. W3C标准盒模型的盒子大小为 ​​content​​, 不包括 ​​padding​​ 和 ​​border​​.

可以这样理解:

IE盒模型的盒子总大小就是 ​​content​​ 的大小, ​​padding​​ 和 ​​border​​ 会被并进 ​​content​​ 内一起计算, ​​content​​ 将会被压缩.​

上图中, 元素样式为 ​​width: 200px; height: 200px; padding: 10px; border: 1px solid #333333;​​可以看到元素(盒子)的总大小为 ​​(200 * 200)px​​.
​​content​​ 则是被压缩成了 ​​((200 - (10 + 1) * 2)/2)px​​.
呃... 看得懂这串算式不..?

W3C标准盒模型的盒子总大小是 ​​content​​ 和 ​​padding​​ 以及 ​​border​​ 的总和大小, 后两者另算大小.​

上图可以看到元素(盒子)的总大小为 ​​(222 * 222)px​​, 这个 ​​222​​ 就是 ​​200 + (10 + 1) * 2​​ 得出来的.
​​​content​​ 大小为 200, ​​padding​​ 和 ​​border​​ 另算大小. 总和大小就是元素(盒子)的总大小.

BFC 原理

BFC 即 ​​Block Formatting Contexts​​, 翻成中文是 ​​块级格式化上下文​​.
具有 BFC 特性的元素, 可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素, 并且 BFC 具有普通容器所没有的一些特性。

可以这样来理解, 将 BFC 理解为一个完全封闭的盒子, 盒子内部的元素无论如何摆放, 也不会影响到盒子外面.

只要元素触发以下任意一条, 便视其具有 BFC 特性(创建BFC的方式):

1. html根元素
2. float浮动
3. 绝对定位
4. overflow不为visible
5. display为表格布局或者弹性布局
   ​
   
   ​

BFC的特性：

1. 内部Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到右边缘）
4. 形成了BFC的区域不会与float box重叠
5. 计算BFC高度时，浮动元素也参与计算。
   

BFC主要的作用：

1. 清除浮动
2. 防止同一BFC容器中的相邻元素垂直方向的外边距重叠问题

举例

1. 同一个 BFC 下的两个块级元素之间的外边距会发生折叠.

如上图所示, 这是两个一毛一样的 div.
它们的样式同为

• 
  

width: 100px; 
height: 100px; 
margin: 50px; 
background: #37A7FF

但它们之间的距离却只有 ​​100px​​, 并不是想象中的 ​​(100 + 100)px​​.
这是因为它们之间的外边距折叠了.
你可以这样理解, 只有一个外边距起作用了. 如果有另外一种场景, 两个元素的外边距长短不一样, 那会是外边距较长的那一个起作用.​

就是这样. 如果想要避免这种情况, 可以把这两个元素分别放到一个具有 BFC 特性的盒子内.

2. 清除浮动.​
这个很容易理解, 浮动的元素会脱离文档的普通流.
如果盒子内的元素是浮动元素且盒子本身不具备 BFC 特性, 那么这个盒子在视觉上并不会包裹住内部浮动元素, 总大小也不包括内部浮动元素. 如下图.

触发盒子的 BFC 特性后:​

3. 阻止元素被浮动元素覆盖​
下图是一个文字环绕效果.

蓝色 div 是一个浮动元素, 灰色 div 是一个块级元素.
会造成上图的原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行.
如果想要避免这种情况, 可以触发灰色 div 的 BFC 特性.

总结就是, BFC 可以适用于各种结构布局.​