box-sizing
定義
用于更改用于計算元素寬度和高度的默認的，可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為
取值范圍
/* 關(guān)鍵字 值 */
box-sizing: content-box;
box-sizing: border-box;
/* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
content-box 是默認值。如果你設(shè)置一個元素的寬為100px，那么這個元素的內(nèi)容區(qū)會有100px寬，并且任何邊框和內(nèi)邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個元素的width設(shè)為100px,那么這100px會包含其它的border和padding，內(nèi)容區(qū)的實際寬度會是width減去border + padding的計算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個元素的寬高。
背景圖片
content-box: 背景為content+padding+border
border-box: 背景為content+padding
margin合并
- 相鄰的兄弟姐妹元素
- 塊級父元素與其第一個/最后一個子元素
- 空塊元素
塊格式化上下文（block formatting context）
定義
塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域
創(chuàng)建方式
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有position為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display : inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display : table-caption , HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素，display : flow-root
- column-span : all 應(yīng)當總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
