原理:
網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)违霞、填充(padding)灭抑、邊框(border)檩淋、邊界(margin)， CSS盒子模式都具備這些屬性在讶。
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解煞抬，所以叫它盒子模型。
盒子模型的特點:
想象一個盒子构哺，它有：外邊距（margin）革答、邊框（border）、內(nèi)邊距（padding）曙强、內(nèi)容（content）四個屬性残拐；
讓我們俯視這個盒子，它有上下左右四條邊碟嘴，所以每個屬性除了內(nèi)容（content）溪食，都包括四個部分：上下左右；這四部分可同時設(shè)置娜扇，也可分別設(shè)置错沃；內(nèi)邊距可以理解為盒子里裝的東西和邊框的距離栅组，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西枢析，外邊距就是邊框外面自動留出的一段空白玉掸。
(以上原理與特點來自百度百科)
W3C盒模型(標準盒模型)與IE盒模型的相同點和不同點:
由上圖可知,他們的相同點就是都有content、padding醒叁、border和margin屬性.不同點在于height和width包含的內(nèi)容不一樣.
W3C 盒子模型的范圍包括 margin司浪、border、padding把沼、content啊易，并且 content 部分不包含其他部分
IE 盒子模型的范圍也包括 margin、border饮睬、padding租谈、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
網(wǎng)頁中的盒子模型续捂；我們常常要控制盒子模型的寬度width:
不同盒子模型的計算方法:
w3c中的盒子模型的寬:包括margin+border+padding+width;
width:margin*2+border*2+padding*2+width;
height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:也包括margin+border+padding+width;
上面的兩個寬度相加的屬性是一樣的垦垂。不過在ie中content的寬度包括padding和border這兩個屬性；
例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解釋牙瓢，那么這個盒子模型占用的
寬度為：20*2+10*2+10*2+200=280px;
高度：20*2+10*2+20*2+50=130px;
盒子的實際寬度大小為:10*2+10*2+200=240px;
實際高度：10*2+10*2+50=90px;
用ie的盒子模型解釋 ：盒子在網(wǎng)頁中占據(jù)的大小為20*2+200=240px;高：20*2+50=90px;
盒子的實際大小為：寬度:200px,高度:50px;
我們常常理解的盒子模型是w3c這樣的盒子模型
