CSS裡的盒子模型的種類區別

我們知道，盒子模型是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 盒子模型，那麼這個盒子需要佔據的位置為：寬 20​​2 +200=240px、高20*2+50=70px，盒子的實際大小為：寬 20​​0px、高 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中文網其它相關文章！
相關閱讀：

CSS3關於translate屬性的詳細介紹

#CSS3實作旋轉光環效果的實作步驟

######Css3中的border-image屬性詳細介紹##########

以上是CSS裡的盒子模型的種類區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！