## 外邊距合并 兩個緊靠著的都有外邊距的盒子模型,采用比較大的外邊距為準,小的不起作用. 遇到這種問題,只給一個盒子外邊距就好了. ## 外邊距塌陷 有父子兩個盒子,給子盒子設置上外邊距,子盒子沒下來,反而導致父盒子塌陷了. 這就是外邊距塌陷. 解決方法 : 1. 給父盒子加一個1px的邊框. 2. 給父盒子一個1px的padding. 3. 父盒子加一個 overflow: hidden . ## 計算盒子尺寸 空間高度 = content height + padding + border + margin 空間寬度 = content width + padding + border + margin 內盒高度 = content height + padding + border*2 內盒寬度 = content width + padding + border ## padding不影響盒子盒子大小的情況 1. 盒子沒有寬度,高度的情況(完全不設置). 2. 繼承來自父親的寬度和高度. ## 盒子布局穩定度 寬度(寬度剩余法) > padding > margin ## css3 盒模型 通過box-sizing來指定盒模型,即可指定content-box,border-box, 這樣我們計算盒子大小的方式就發生了變化了. box-sizing : content-box 盒子大小為width + padding + border . content-box為默認值. box-sizing : border-box 盒子大小為width,就是說padding 和border是包含到width里面的.