在網頁設計時我們必須要明白：所有html元素可以看作盒子（方塊），通過這些盒子的排列堆疊我們就得到了乙個網頁結構，但是這些盒子的自有屬性以及排列堆疊方式可以通過css樣式來進行控制調整，所以我們就有了css盒子模型的概念。
css盒子模型(box model)包括ie盒子模型和標準的w3c盒子模型 ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素
在標準的盒子模型中，width指content部分的寬度，在ie盒子模型中，width表示content+padding+border這三個部分的寬度，故這使得在計算整個盒子的寬度時存在著差異：
標準盒子模型的盒子寬度：左右margin+左右border+左右padding+width
ie盒子模型的盒子寬度：左右margin+width
解析：
1.無論是行內還是塊級元素，在審查元素時都可以看到乙個元素的盒子模型，只不過部分元素可能因為margin、border、padding值為0而失去了盒子的形
2.我們可以通過設定元素的display屬性使得元素的盒子模型擁有真正的含義，一般是為了將行內元素作為塊元素使用時使用
3.要注意margin、border、padding各值得設定範圍，如果超過元素最大可設定範圍則有可能失效
一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的（這就是為什麼會有ie盒子模型和標準的w3c盒子模型的區別了）。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
ie8 及更早ie版本不支援 填充的寬度和邊框的寬度屬性設。
解決ie8及更早版本不相容問題可以在html頁面宣告 即可。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...