【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 将会被压缩.

上图中, 元素样式为  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.它们的样式同为

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

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

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

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

触发盒子的 BFC 特性后:

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

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

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

回复“加群”与大佬们一起交流学习~