css盒模型

什麼是盒模型

引用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）

定義一個樣式：

.box {
    width: 100px;
    height: 100px;
    border: solid 1px #ddd;
    padding: 10px;
    margin: 10px;
}

應用樣式

<div class="box"></div>

那麼他的盒子模型是這樣的（chrome瀏覽器）：

這張圖能夠清晰的反應出來元素的內容尺寸、邊框大小、內邊距大小和外邊距大小。這樣就是理想的展示方式，也是符合咱們的理解邏輯的：
盒模型 = 內容尺寸 + 內邊距 + 邊框尺寸 + 外邊距（內邊距、邊框、外邊距各個方向上須要計算2倍）
一切都是這麼完美。可是，IE來了...

IE的特殊盒子模型
咱們以一樣的樣式和元素來做爲例子，在ie瀏覽器中的盒子模型則有很大的不一樣

咱們在樣式中定義的尺寸很明顯：width:100px;height:100px; 可是這裏的內容尺寸則爲122 x 122；這個數字恰好是 內邊距(102) + 邊框(12) 的和，因此IE的內容邊界包括了內邊距和邊框。因此在IE中：
盒模型 = 內容（內容邊界+內邊距2+邊框2）+ 外邊距