【前言】前端頁面的構建過程中，盒模型相關的概念會一直如影隨形，因此需要深刻地理解好盒模型。本文會先簡單描述一下盒模型，然后描述一些平常會遇到的注意點。
本文將從1、盒模型描述；2、W3C標準盒模型/IE傳統(tǒng)盒模型 ；3.box-sizing屬性；4，常見問題。
一、盒模型描述
之前跟朋友一起打羽毛球的時候看到羽毛球場地，我X，這不就是傳說中的盒模型么，因此我還被他們調(diào)侃代碼中毒太深。首先，po一張圖。
眾所周知，羽毛球運動中，雙打的安全區(qū)域是標注的紅色線框內(nèi)，單打的安全區(qū)域是標注的黃色線框內(nèi)，單雙打重疊的區(qū)域就是上面標注的藍色框框了，一個羽毛球廠的邊界線就是最外層的白色框框，且各個羽毛球場中間總會留一些間隙，就是外層白色框框與邊界的距離。
將這些對比盒模型的話：
1.藍色框框就是我們?nèi)粘Ｋf的內(nèi)容框content，內(nèi)容只會在這個區(qū)域展示；
2.最外層的那個邊界線就是我們所說的border，
3.content和border中間的距離就是內(nèi)邊距padding
4.最外層的邊界線與旁邊的白邊的間距就是外邊距margin。
回歸到盒模型就如下圖所示：
二、W3C標準盒模型/IE傳統(tǒng)盒模型
1.W3C標準盒模型如下圖如果設置添加下面的css屬性，則在chrome下的預覽效果及l(fā)ayout是
.box{
background-color:lightpink;
width:255px;
height:300px;
border:20px solid#f00;
padding:20px;
margin:20px;
}
從上方可以看出來
內(nèi)盒尺寸（大小） = width + padding + border
外盒尺寸（空間尺寸）= width + pading + border + margin
經(jīng)過計算可以得出：
div的內(nèi)盒寬度 = width+ (padding + border )*2 = 335，內(nèi)盒外盒高度= height+ (padding + border)*2=380
div的外盒寬度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2=420
內(nèi)容區(qū)域content的寬度 = width = 255,content的高度=height=300
2.IE傳統(tǒng)盒模型如果在ie下預覽及l(fā)ayout則是下面的效果
從上方可以看出來
內(nèi)盒尺寸（大?。?= width
外盒尺寸（空間尺寸）= winth + margin
div的內(nèi)盒寬度 = width= 255，內(nèi)盒外盒高度= height= 300
div的內(nèi)盒高度 = height + margin=255+ 20*2=295，內(nèi)盒外盒高度=300+ margin= 300+ 20*2=340
內(nèi)容content的寬度 = 內(nèi)盒寬度- padding -border =255- （20 + 20）*2 = 175,content的高度=內(nèi)盒高度- padding -border =300- （40 + 10）*2 =220
【總結(jié)】
W3C標準盒模型：
內(nèi)盒尺寸（大?。?= width + padding + border
外盒尺寸（空間尺寸）= width + pading + border + margin
IE傳統(tǒng)（IE6）盒模型
內(nèi)盒尺寸（大小） = width
外盒尺寸（空間尺寸）= winth + margin
三、box-sizing屬性
【基礎概念】：以特定方式定義匹配某個區(qū)域的特定個元素【兼容性IE8+】
【屬性值】
content-box:寬度和高度分別用到元素的內(nèi)容框，即上方所示的W3C標準盒模型【默認值】
border-box:寬度和高度分別用到元素的內(nèi)容框、內(nèi)邊距，邊框，即上方所示的IE傳統(tǒng)盒模型
inherit:繼承父元素的box-sizing屬性
【tpis】移動端，建議添加box-sizing:border-box值，因為我們頁面局部基本上是按區(qū)域已經(jīng)布局好了，但是有的時候改變一個元素的邊距值，可能會導致鈣元素的大小變大直接元素下移，頁面錯亂。但是添加了box-sizing:border-box可以保證頁面整理布局不會亂。
三、常見問題
1.margin重疊問題
塊級元素水平方向不會重疊，垂直方向可能會重疊（若重疊，邊距取較大的值；出現(xiàn)負值則取兩者差值的絕對值）
如下圖所示，若上面的元素設置margin:20px；下面的元素設置margin:10px。則兩個元素在垂直方向的margin會重疊且取相對大的值。
這里情況比較復雜，這里先簡單說下，只有會在寫一篇跟margin相關的文章詳細闡述下。
2.margin不生效
最多出現(xiàn)在firefox，或者受浮動及定位影響，可以考慮用padding代替。
