標準盒子模型和IE模型的區別【轉】

盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看咱們熟知的標準盒子模型：

從上圖能夠看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。

　從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。

 

網頁中的盒子模型；咱們經常要控制盒子模型的寬度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的盒子模型解釋 ：盒子在網頁中佔據的大小爲20*2+200=240px; 高：20*2+50=90px;

盒子的實際大小爲：寬度:200px, 高度:50px;

咱們經常理解的盒子模型是w3c這樣的盒子模型

【轉】