引用mdn官方的解釋：
當對乙個文件進行布局（lay out）的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型（css basic box model），將所有元素表示為乙個個矩形的盒子（box）。css 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。 每個盒子由四個部分（或稱區域）組成，其效用由它們各自的邊界（edge）所定義（原文：defined by their respective edges，可能意指容納、包含、限制等）。如圖，與盒子的四個組成區域相對應，每個盒子有四個邊界：內容邊界 content edge、內邊距邊界 padding edge、邊框邊界 border edge、外邊框邊界 margin edge。文字看起來有些蒼白，我們舉例說明（talk is cheap，show me code）
定義乙個樣式：
.<這張圖可以清晰的反應出來元素的內容尺寸、邊框大小、內邊距大小和外邊距大小。這樣就是理想的展現方式，也是符合我們的理解邏輯的：
盒模型 = 內容尺寸 + 內邊距 + 邊框尺寸 + 外邊距（內邊距、邊框、外邊距各個方向上需要計算2倍）
一切都是這麼完美。但是，ie來了...
ie的特殊盒子模型
我們以同樣的樣式和元素來作為例子，在ie瀏覽器中的盒子模型則有很大的不同
我們在樣式中定義的尺寸很明顯：width:100px;height:100px; 但是這裡的內容尺寸則為122 x 122；這個數字剛好是 內邊距(10*2) + 邊框(1*2) 的和，所以ie的內容邊界包括了內邊距和邊框。所以在ie中：
盒模型 = 內容（內容邊界+內邊距*2+邊框*2）+ 外邊距
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...