所有html元素可以看作盒子，在css中，」box model」這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的說明了框模型(box model)：
不同部分的說明：
margin - 清除邊框區域。margin沒有背景顏色，它是完全透明為了在所有瀏覽器中的元素的寬度和高度設定正確的話，你需要知道的盒模型是如何工作的。border - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
padding - 清除內容周圍的區域。會受到框中填充的背景顏色影響
content - 盒子的內容，顯示文字和影象
remark重要: 當您指定乙個css元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完全大小的元素，你還必須新增填充，邊框和邊距。.
下面的例子中的元素的總寬度為300px：
width:250px;讓我們自己算算：padding:10px;
border:5px solid gray;
margin:10px;
250px (寬)
+ 20px (left + 右填充)
+ 10px (left + 右邊框)
+ 20px (left + 右邊距)
= 300px
試想一下，你只有250畫素的空間。讓我們設定總寬度為250畫素的元素:
width
:220px;
padding
:10px;
border
:5px solid gray;
margin
:0px;
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
ie8 及更早ie版本不支援 填充的寬度和邊框的寬度屬性設。
解決ie8及更早版本不相容問題可以在html頁面宣告 即可。
CSS模型框學習筆記
css模型框概述 css框模型規定了元素框處理元素內容 內邊距 邊框 外邊距的方式 一般所指的width height說的是元素內容的寬和高，外邊距預設是透明的，不會遮擋其後面的元素，而一般所說的背景是指內容和內邊距所形成的區域，內邊距 邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊，...
CSS 框模型（八）
css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。一旦為頁面設定了恰當的 dtd，大多數瀏...
CSS 框模型概述
css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。內邊距 邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者 樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用...