IE盒模型和標準w3c盒模型

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像

W3C 盒子模型的範圍包括： margin、border、padding、content，而且 content 部分不包含其餘部分
IE 盒子模型的範圍也包括 ：margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 padding

 

例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px，假如用標準 w3c 盒子模型解釋，那麼這個盒子須要佔據的位置爲：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小爲：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那麼這個盒子須要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小爲：寬 200px、高 50px。

　　那應該選擇哪中盒子模型呢？固然是「標準 w3c 盒子模型」了。怎麼樣纔算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，假如加上了 doctype 聲明，那麼全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

。