我們知道，盒子模型是css中一個重要的概念，只有理解了盒子的模型你才能更好的佈局和排班，但是一般我們所說的盒子模型分為兩個物種，一種IE盒子模型和一種W3C盒子模型
ie 盒子模型的範圍也包括margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了border 和 pading。
範例：一個盒子的 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 盒子模型，那麼這個盒子需要佔據的位置為：寬 202 +200=240px、高20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。
盒子模型的選定：
怎麼樣才算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂端加上 doctype宣告。假如不加 doctype 聲明，那麼各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
PS：CSS中margin和padding的區別
在CSS中margin是指自身邊框到自身外部另一個容器邊框之間的距離，就是容器外距離；padding則是容器內距離。
一、padding
1、語法結構
（1）padding-left:10px; 左內邊距
##（2）padding-right
:10px; 右內邊距（3）padding-top
:10px; 上內邊距（4）padding-bottom
:10px; 下內邊距（5）padding：10px; 四邊統一內邊距（ 6）padding:10px 20px; 上下、左右內邊距（7）padding:10px 20px 30px; 上、左右、下內邊距（8）padding:10px 20px 30px 40px; 上、右、下、左內邊距2、可能取的值（1）length 規定特定單位記的內邊距長度#（ 2）% 基於父元素的寬度的內邊距的長度（3）auto 瀏覽器計算內邊距（4）inherit 規定應該從父元素繼承內邊距3、瀏覽器相容問題（1）所有瀏覽器都支援padding屬性（2）任何版本IE都不支援屬性值「inherit」 相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是CSS裡的盒子模型的種類區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
