【CSS】410- 关于CSS盒子模型、BFC及其应用
【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盒模型.
这两者的区别在于:
- IE盒模型的盒子大小为
content + padding + border. - 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的方式):
- html根元素
- float浮动
- 绝对定位
- overflow不为visible
- display为表格布局或者弹性布局
BFC的特性：
- 内部Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到右边缘）
- 形成了BFC的区域不会与float box重叠
- 计算BFC高度时，浮动元素也参与计算。
BFC主要的作用：
- 清除浮动
- 防止同一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 可以适用于各种结构布局.