css中的盒模型一般分為標準w3c盒模型和ie盒模型。
css盒模型(box model)規定了元素框處理元素內容、內邊距、邊框、和外邊距的方式。
下圖說明了盒子模型
元素框的最內部分是實際的內容（content），直接包圍內容的是內邊距（padding），內邊距呈現了元素的背景。內邊距的邊緣是邊框（border），邊框以外是外邊距（margin），外邊距預設是透明的，因此不會遮擋其後的任何元素。
注意：背景應用於由內容和內邊距、邊框組成的區域。
那我們分別來看一下標準的盒模型以及ie盒模型
在標準盒模型 中，width 和 height 指的是內容區域的寬度和高度。
ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的width包含了 content 、border 和 pading。 即瀏覽器的width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
來個例子：乙個div盒子
div
盒模型佔的位置大小
盒子所佔寬度為：內容的寬度+內邊距（左、右邊距）+邊框（左、右邊框）+外邊距（左、右外邊距）
盒子所佔高度為：內容的高度+內邊距（上、下邊距）+邊框（上、下邊框）+外邊距（上、下外邊距）
如果用w3c盒子模型解釋，那麼這個盒子占用的
占有的寬度為 100 + 10 * 2 + 1 * 2 + 20 * 2 = 162px
占有的高度為 150 + 10 * 2 + 1 * 2 + 20 * 2 = 212px
這裡我要說明一點，這個盒子實際的大小：
盒子實際寬度為：內容的寬度+內邊距（左、右邊距）+邊框（左、右邊框）
盒子實際高度為：內容的高度+內邊距（上、下邊距）+邊框（上、下邊框）
實際寬度：100 + 10 * 2 + 1 * 2 = 122px
實際高度：150 + 10 * 2 + 1 * 2 = 172px
用ie的盒子模型解釋，這個盒子占用的
盒子占有的寬度為 width+margin
占有的高度為 height+margin
占有的寬度為 100 + 20 * 2 = 140px
占有的高度為 150 + 20 * 2 = 190px
重點：
這個盒子實際的大小為： 寬度100px 高度150px
我們一般理解的是標準下的盒子模型。
注意：
寬度和真實占有寬度，不是乙個概念！！
在標準模式下，改變外邊距、內邊距和邊框的大小，僅僅導致盒子模型占有的寬度和高度發生改變，並不會影響內容區域的高度和寬度。
如果我將div的width、height保持不變，padding、border改變，如下：
div
內容區域的寬度仍為100px，高度仍為150px。但是盒子模型占有的寬度、高度分別為：
div盒子的寬度100 + 15 * 2 + 1 * 2 + 20 * 2 = 172px
div盒子的高度150 + 15 * 2 + 1 * 2 + 20 * 2 = 222px
這個盒子實際的大小為
寬度：100 + 10 * 2 + 1 * 2 = 122px
高度：150 + 10 * 2 + 1 * 2 = 172px
我們會發現盒子變大了。
ie盒模型中，盒子的實際寬度仍為100px 高度仍為150px。
我們要知道：
ie盒模型下，一旦設定了width和height，無論改變padding和border為多少，只要在總寬度和高度的承受範圍內，都不會改變整體的大小，當然太大了會溢位。而在標準盒模型中，改變padding和border都會使整個box的寬高改變。
如果我們想動態改變border的大小，但是又不想讓box的大小發生改變，該如何去做呢？
css3有乙個非常有用的屬性：
css3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
語法：box-sizing: content-box|border-box|inherit;
content-box:這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
border-box:為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit規定應從父元素繼承 box-sizing 屬性的值。
**簡單理解為content-box 為 外加模式，使用者設定的寬度和高度是相對穩定的，增加border、padding會使整個盒子變大。
border-box： 為內減模式，盒子的實際寬度和高度是固定不變的，使用者已經設定好的width和height。 增加border和padding的值，不會改變盒子的大小，只改變內容區域的大小。
border-box 改變border padding不會影響到其他的盒子，在移動端用的比較多。**
看例子：
charset="utf-8">
title>
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...
CSS3盒子模型
2.1.2 內容區 2.1.3 邊框 border color 邊框顏色 border style 邊框樣式，也可以指定不同方向的邊框的樣式 2.1.4 內邊距 2.1.5 外邊距 通常左外邊距和上外邊距會移動自身，右外邊距和下外邊距會移動其他元素 2.2.1 水平布局 乙個元素在父元素中，水平布局...
CSS3 彈性盒子模型
lang en charset utf 8 標題title rel stylesheet href css reset.css type text css box zxw style head class box class zxw zxw1li class zxw zxw2li class zxw...