盒子模型(box mode)是css中乙個重要的概念，對於網頁中的大部分物件，實際呈現形式都是乙個盒子形狀物件，理解了盒子模型才能更好的排版。對於盒子，我們最關心的就是盒子的尺寸：丫的要佔多大地皮？
其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，他們對盒子模型的解釋各不相同，簡單理解一下，方便我們了解為何ie這麼讓人痛苦，為何要為ie寫一堆hock。這裡再順便鄙視一下，ie總是與標準對著幹。
從上圖可以看到標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
那麼，假設：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，用標準 w3c 盒子模型解釋，那麼：從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的content 部分包含了 border 和 pading這個盒子需要佔據的位置為
寬=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
盒子的實際大小為
寬 = border*2 + padding*2 + content.width = 1*2+10*2+200=222px、
高 = border*2 + padding*2 + content.height = 1*2+10*2+50=72px；
那麼，假設：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，用標準 w3c 盒子模型解釋，那麼：當margin,padding,border都為0時，兩種盒模型是沒有區別的，這個時候我們不用考慮使用哪種盒模型。可是，如果一定要選擇一種 盒模型呢，選擇哪種？不用我說，大家也會選擇標準的盒子，畢竟大家對ie的怨恨已經達到一定程度了。但是，怎麼選擇w3c標準的盒子呢？這個盒子需要佔據的位置為
寬=margin*2 +content.width = 20*2+200=240px、
高= margin*2 + content.height = 20*2+50=70px;
盒子的實際大小為
寬 = content.width = 200px
高 = content.height = 50px
在新建html文件時，大家可能沒有注意到其html標籤上面的doctype宣告 ，只要加上doctype宣告，瀏覽器就會採用w3c盒子標準去解釋你的盒子了。
這裡有一點小疑惑，剛看了一下 google 首頁是沒有用 doctype宣告的。
標準盒子模型和IE盒子模型的區別
盒子模型是css中很重要的乙個概念，裡面包含了內容 content 內邊距 padding 邊框 border 外邊距 margin 標準盒子模型 box sizing content box 盒子的內容不包括padding和border，那麼盒子的width content。比如你給乙個盒子100...
標準盒子模型和IE盒子模型的區別
css盒子模型 又稱為框模型 box model 包含了元素內容 content 內邊距 padding 邊框 border 外邊距 margin 幾個要素。圖中的內層是content依次是padding border margin，如下圖 w3c 盒子模型的範圍包括 margin border p...
css盒子模型 css的盒子模型是什麼
css盒子模型就是在網頁設計中經常用到的css技術所使用的一種思維模型。css盒子模型又稱為框模型 box model 包含了元素內容 content 內邊距 padding 邊框 border 外邊距 margin 幾個要素組成了盒子模型。圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框...