關於css的盒子模型相信學習前端的同學都有所耳聞，因為它太基礎太重要了。
提起盒子模型，大家可能會想到content，padding，border，margin這些詞彙，還有也許還會想起盒子模型有兩種，比如ie的盒子模型與w3c的盒子模型，那麼我們怎麼來區分呢？
先來看看w3c的盒子模型：
w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
再看看ie的：
ie 盒子模型的範圍也包括 margin、border、padding、content，看起來好像沒什麼不一樣，如果仔細觀察就可以發現其實ie的盒子模型的width與height是在border外側來計算的。
我們現在來實際試乙個實際的例子看看它們兩個的區別：
我們設定乙個盒子成這樣：
margin:10px,border:20px,padding:30px;width:400px;height:500px;
那麼對於w3c而言其佔據的實際高度為：10*2+20*2+30*2+500=620px;
實際佔據的寬度為：10*2+20*2+30*2+400=520px;
盒子實際的高度為：20*2+30*2+500=600px;
盒子實際的寬度為：20*2+30*2+400=500px;
對ie而言呢：
其佔據的實際高度為：10*2+500=520px;
實際佔據的寬度為：10*2+400=420px;
盒子實際的高度為：500px;
盒子實際的寬度為：400px;
其實在css3出來之後我們又有了「新的盒子模型」了，而且也是分為兩種（注：box-sizing的屬性值好像還有padding-box但是我查 css參考手冊卻沒有查到，先不管吧 ）：
box-sizing:content-box | border-box，其中 content-box是預設的值。
理論上說，content-box和border-box的主要區別是二者的盒子的寬度是否包含元素的邊框和內邊距。這樣說來上面的 ie盒子模型不就 剛好與border-box對上號了嗎。很多人覺得border-box才是我們真正需要的盒子模型，比如boostrap就使用了border-box，看來微軟設計的盒子模型還是有 其高明之處的。
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...
CSS 兩種盒模型
第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 標準盒模型width指的是內容區域content的寬度 height指的是內容區域content的高度 w3c標準盒模型下盒子的大小 width content border padding margin 怪異盒模型中的...
css的兩種盒模型
前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做乙個關於css盒模型的分享。問題下面的 可以直接複製出去執行哦 lang en charset utf 8 css盒模型title head type text css content style class co...