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合并
- 相鄰的兄弟姐妹元素
- 塊級父元素與其第一個/最后一個子元素
- 空塊元素
塊格式化上下文（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 的元素并不被包裹在一個多列容器中。
