CSS 盒模型与 BFC

基本概念

盒模型的基本组成, 由里到外 content / padding / border / margin.
盒模型有两种标准:

• 标准盒模型
• IE 模型

它们的区别是, 标准盒模型的宽高只是内容(content)的宽高;而 IE 模型中的宽高是内容(content)+填充(padding)+边框(border) 的总宽高.

css 中两种模式的切换

可以使用 box-sizing 来设置.

/* 标准模型 */
box-sizing: content-box;

/* IE 模型 */
box-sizing: border-box;

/* 规定应从父元素继承 box-sizing 属性的值 */
box-sizing: inherit;

关于 border-box 的使用:

• 一个 box 宽度为 100%，又想要两边有内间距，这时候用就比较好
• 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度

边距重叠

什么是边距重叠呢?
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值,如下图:

当然外边距合并其实也有存在的意义，如下图：

折叠时的取值:

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并.

BFC

BFC 意为 Block Formatting Context (块级格式化上下文)

BFC 的原理:

1. 内部的 box 会在垂直方向一个接一个的放置
2. 每个元素的 margin box 的左边与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)
3. box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠
4. BFC 的区域不会与浮动区域的 box 重叠
5. BFC 是一个页面上的独立容器, 外面的元素不会影响 BFC 里的元素; 反过来,里面的也不会影响外面的
6. 计算 BFC 高度的时候, 浮动元素也会参与计算

怎么创建 BFC

1. float属性不为 none (脱离文档流)
2. position为absolute或flex
3. display为inline-block/inline-table/inline-grid/table-cell/table-caption/flex/inline-flex
4. overflow不为visible
5. 根元素

问题

• display: table 可能会产生一些问题
• overflow: scroll 可能会显示不必要的滚动条
• float: left 将会把元素置于容器的左边，其他元素环绕着它
• overflow: hidden 将会剪切掉溢出的元素

应用场景

1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直 margin 重叠

参考链接

理解 CSS 中 BFC
盒模型
BFC