【前端學習】-盒模型

【前言】前端頁面的構建過程當中，盒模型相關的概念會一直如影隨形，所以須要深入地理解好盒模型。本文會先簡單描述一下盒模型，而後描述一些日常會遇到的注意點。
本文將從一、盒模型描述；二、W3C標準盒模型/IE傳統盒模型 ；3.box-sizing屬性；4，常見問題。

1、盒模型描述

以前跟朋友一塊兒打羽毛球的時候看到羽毛球場地，我X，這不就是傳說中的盒模型麼，所以我還被他們調侃代碼中毒太深。首先，po一張圖。

衆所周知，羽毛球運動中，雙打的安全區域是標註的紅色線框內，單打的安全區域是標註的黃色線框內，單雙打重疊的區域就是上面標註的藍色框框了，一個羽毛球廠的邊界線就是最外層的白色框框，且各個羽毛球場中間總會留一些間隙，就是外層白色框框與邊界的距離。
將這些對比盒模型的話：

1.藍色框框就是咱們平常所說的內容框content，內容只會在這個區域展現；
2.最外層的那個邊界線就是咱們所說的border，
3.content和border中間的距離就是內邊距padding
4.最外層的邊界線與旁邊的白邊的間距就是外邊距margin。

迴歸到盒模型就以下圖所示：

2、W3C標準盒模型/IE傳統盒模型

1.W3C標準盒模型 以下圖若是設置<div class="box"><img src="img/demo.jpg"/></div>添加下面的css屬性，則在chrome下的預覽效果及layout是

.box{

background-color: lightpink;
width: 255px;
height: 300px;
border: 20px solid #f00;
padding: 20px;
margin: 20px; }

從上方能夠看出來

內盒尺寸（大小） = width + padding + border 
外盒尺寸（空間尺寸）= width + pading + border + margin
通過計算能夠得出：
div的內盒寬度 = width+ (padding + border )*2 = 335，內盒外盒高度= height+ (padding + border)*2=380
div的外盒寬度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2 =420
內容區域content的寬度 = width = 255,content的高度= height=300

2.IE傳統盒模型 若是在ie下預覽及layout則是下面的效果

從上方能夠看出來

內盒尺寸（大小） = width 
外盒尺寸（空間尺寸）= winth + margin
div的內盒寬度 = width= 255，內盒外盒高度= height= 300
div的內盒高度 = height + margin= 255+ 20*2=295，內盒外盒高度= 300+ margin= 300+ 20*2=340
內容content的寬度 = 內盒寬度- padding -border = 255- （20 + 20）*2 = 175,content的高度=  內盒高度- padding -border =300- （40 + 10）*2 =220

【總結】

W3C標準盒模型：
內盒尺寸（大小） = width + padding + border 
外盒尺寸（空間尺寸）= width + pading + border + margin
IE傳統（IE6）盒模型 
內盒尺寸（大小） = width 
外盒尺寸（空間尺寸）= winth + margin

3、box-sizing屬性

【基礎概念】：以特定方式定義匹配某個區域的特定個元素【兼容性IE8+】
【屬性值】

content-box:寬度和高度分別用到元素的內容框，即上方所示的W3C標準盒模型【默認值】
border-box:寬度和高度分別用到元素的內容框、內邊距，邊框，即上方所示的IE傳統盒模型
inherit:繼承父元素的box-sizing屬性

【tpis】移動端，建議添加box-sizing:border-box值，由於咱們頁面局部基本上是按區域已經佈局好了，可是有的時候改變一個元素的邊距值，可能會致使鈣元素的大小變大直接元素下移，頁面錯亂。可是添加了box-sizing:border-box能夠保證頁面整理佈局不會亂。

4、常見問題

1.margin重疊問題
塊級元素水平方向不會重疊，垂直方向可能會重疊（若重疊，邊距取較大的值；出現負值則取二者差值的絕對值）
以下圖所示，若上面的元素設置margin:20px；下面的元素設置margin:10px。則兩個元素在垂直方向的margin會重疊且取相對大的值。
這裏狀況比較複雜，這裏先簡單說下，會在一篇寫margin相關的文章詳細闡述下。

2.margin不生效最多出如今firefox，或者受浮動及定位影響，能夠考慮用padding代替。