盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，
先來看看我們熟悉的標準盒子模型：
看不清楚？這裡檢視原圖（大圖）。
從上圖可以看到標準w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
看不清楚？這裡檢視原圖（大圖）。
從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
例：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，如果用標準 w3c 盒子模型解釋，那麼這個盒子需要佔據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用ie 盒子模型，那麼這個盒子需要佔據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。
那應該選擇哪中盒子模型呢？當然是「標準 w3c 盒子模型」了。怎麼樣才算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上 doctype 宣告。如果不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了 doctype 宣告，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
再用 jquery 做的例子來證實一下。
**1：
上面的**沒有加上 doctype 宣告，在 ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。
**2：
**2 與**1 唯一的不同的就是頂部加了 doctype 宣告。在所有瀏覽器中都顯示「標準 w3c 盒子模型」。
所以為了讓網頁能相容各個瀏覽器，讓我們用標準 w3c 盒子模型
div css 盒子模型
那麼它為什麼叫盒子呢？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，相當...
DIV CSS盒子模型
一 盒子模型css height width padding 內邊距 margin 外邊距 border 1.margin 外邊距 margin top 15px margin right 50px margin bottom 100px margin left 150px 或者margin 10p...
css盒子模型，div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...