框模型（box model，也譯作「盒模型」）是css非常重要的概念，也是比較抽象的概念。
文件樹中的元素都產生矩形的框（box），這些框影響了元素內容之間的距離、元素內容的位置、背景的位置等等。而瀏覽器根據視覺格式化模型（visual formatting model）來將這些框布局成訪問者看到的樣子。
因此，要掌握使用css布局的技巧，就需要深入了解框模型和視覺格式化模型的原理。
瀏覽器內顯示的元素都可以看作是乙個裝了東西的矩形的盒子，這些矩形的盒子巢狀、疊加或者並列在一起，形成了頁面。
圖1顯示了每乙個元素的「框（box）」由幾部分組成：
內容（content）
邊框（border）
邊框（也譯為邊界）是可以具體顯示出來的，可以設定寬度、外觀樣式和顏色。
補白（padding）
補白（也譯為填充、內邊距、內補丁等）是內容框與邊框之間的距離，補白部分顯示的是背景。
邊距（margin）
邊距（也譯為邊白、外邊距、外補丁等）是邊框外的透明區域，用來設定本元素與其它元素之間的距離。
乙個元素框，又有上、右、下、左四個方向的邊，如圖2所示。
內容框的尺寸（寬度和高度）取決於若干個因素，例如：
* /* 清除瀏覽器預設的樣式 */
div
ul li
.sample
ul下面的div
由圖3和圖4，我們可以發現：
元素的框寬度 = 左邊距（margin-left） + 左邊框寬（border-left-width） + 左補白（padding-left） + 內容寬度（width） + 右補白（padding-right） + 右邊框寬（border-right-width） + 右邊距（margin-right）
元素的框高度 = 上邊距（margin-top） + 上邊框寬（border-top-width） + 上補白（padding-top） + 內容高度（height） + 下補白（padding-bottom） + 下邊框寬（border-bottom-width） + 下邊距（margin-bottom）
在ie 5.5及更早的版本，以及在怪異模式中的ie 6.0/7.0中，會錯誤地將框模型理解為：
width = border-left + padding-left + 內容寬度 + padding-right + border-right
height = border-top + padding-top + 內容高度 + padding-bottom + border-bottom
也就是說，錯誤的框模型把width和height理解為邊框框的寬度和高度，而不是內容框的。（當然，很多人都認為這樣的設定更容易計算布局的尺寸。）
例如下列**：
div
則div的框寬度應為360px（10px + 5px + 15px + 300px + 15px + 5px +10px），而在ie的錯誤框模型中，框的寬度為320px（10px + 300px +10px），實際的內容寬度為260px（300px – 15px*2 – 5px*2）。
因此會造成元素尺寸顯示的不正確。
CSS 框模型（八）
css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。一旦為頁面設定了恰當的 dtd，大多數瀏...
CSS 框模型概述
css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。內邊距 邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者 樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用...
CSS 的框模型
內邊距 邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者 樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設定 在 css 中，width 和 height 指的是內容區域的寬度...