box-sizing

定义

用于更改用于计算元素宽度和高度的默认的，可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为

取值范围

/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box;
/* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

背景图片

content-box: 背景为content+padding+border
border-box: 背景为content+padding

margin合并

1. 相邻的兄弟姐妹元素
2. 块级父元素与其第一个/最后一个子元素
3. 空块元素

块格式化上下文（block formatting context）

定义

块级盒布局出现的区域，也是浮动层元素进行交互的区域

创建方式

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有position为 absolute 或 fixed)
• 内联块 (元素具有 display : inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display : table-caption , HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素，display : flow-root
• column-span : all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。