博客原文：http://www.cnblogs.com/duanyingkui/p/7875736.html
盒子模型是css中一個重要的概念仗处，理解了盒子模型才能更好的排版框冀。其實(shí)盒子模型有兩種屈梁，分別是 ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對盒子模型的解釋各不相同乃坤，先來看看我們熟知的標(biāo)準(zhǔn)盒子模型：
從上圖可以看到標(biāo)準(zhǔn) W3C 盒子模型的范圍包括 margin旬迹、border、padding液斜、content累贤，并且 content 部分不包含其他部分。
從上圖可以看到 IE 盒子模型的范圍也包括 margin少漆、border臼膏、padding、content示损，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading渗磅。
網(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;
盒子的實(shí)際寬度大小為:10*2+10*2+200=240px;
實(shí)際高度：10*2+10*2+50=90px;
用ie的盒子模型解釋 ：盒子在網(wǎng)頁中占據(jù)的大小為202+200=240px; 高：202+50=90px;
盒子的實(shí)際大小為：寬度:200px, 高度:50px;
我們常常理解的盒子模型是w3c這樣的盒子模型
