盒子模型

我們在這裡將盒子模型主要分為標準盒子模型和IE盒子模型。

影響盒子模型尺寸大小的屬性：content，padding，border，margin。

標準盒子模型（W3C盒模型）

.box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid red;
    padding: 10px;
}

盒子的總寬度/高度 = content + padding + border + margin

在上述程式碼例子中，盒子的總寬度 = 100 + 10 x 2 + 5 x 2 + 20 x 2 = 170px ；盒子的總高度計算相同。

IE盒子模型

.box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid red;
    padding: 10px;
    box-sizing: border-box;
}

只需要在CSS程式碼中加入box-sizing: border-box; 就可以將標準盒子模型轉換為IE盒子模型；

同樣，設定為box-sizing: content-box; （content-box是預設值）時，將IE盒子模型轉換為標準盒子模型。

同樣的，盒子的總寬度/高度 =content + padding + border + margin

但此時實際的 content = content + padding + border，所以當 width: 100px 時，圖中藍色部分寬度為 70px 。

在IE盒子模型中content = content + padding + border，這也是兩種盒模型的區別所在，這樣做的優勢：padding 和 border 的改變不會改變元素的尺寸，不會打亂整體佈局。