盒子模型是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這樣的盒子模型
盒模型 IE盒模型和W3C盒模型
w3c盒模型 可以看到得到的盒子寬度和高度是120 20 20 5 5 10 10 190px ie盒模型 可以看到得到的盒子寬度和高度是120 10 10 140px 其中的120 70 20 20 5 5。也就是設定的div寬度包括了內容內邊距和邊框的寬度。通過這兩對盒子進行對比可以清楚看到兩種...
IE 盒模型和W3C盒模型
在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...
W3C盒模型與IE盒模型
ss盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。w3c模型中 ...