关于CSS的盒子模型,正确的解释应该是这样的:
把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型.
随便写个 div, 打开 Chrome 的开发者工具, 在右边栏能看到这样一个直观的盒模型图.
这个 div 从外到内被分成了四层, 分别是:
box-sizing
盒模型又被分为 IE盒模型 和 W3C标准盒模型 两种类型.
在 IE8+ 的浏览器中要使用哪个盒模型可以由 box-sizing 控制.
默认值为 content-box
, 即W3C标准盒模型;
如果将 box-sizing 设为 border-box
则用的是IE盒模型.
这两者的区别在于:
content + padding + border
.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的方式):
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 可以适用于各种结构布局.