1、CSS盒模型概述

1. CSS 盒模型規定了元素框處理元素內容（content）、內邊距（padding）、邊框 （border）和 外邊距 （margin）的方式.
2. CSS盒模型分為W3C盒模型和IE盒模型

 2、通過程式碼直觀感受以下兩者區別

• 定義兩個div

<div id="border-box">我是IE盒模型(border-box)</div>
<div id="content-box">我是w3c盒模型(content-box)</div>

• 給這兩個div設定寬高、背景顏色以及採用哪種盒模型 

#border-box {
    width: 200px;
    height: 200px;
    box-sizing: border-box; //採用IE盒模型
    background-color: yellow;
    margin-bottom: 10px;
}
#content-box {
    width: 200px;
    height: 200px;
    box-sizing: content-box; //採用W3C標準盒模型
    background-color: yellow;
}
 

• 結果如下 

•  給兩個div加上邊框

#border-box {
    border: 10px salmon solid;
}
#content-box {
    border: 10px salmon solid;
}

•  結果如下

• 給兩個div加上內邊距

#border-box {
    padding: 50px;
}
#content-box {
    padding: 50px;
}

• 結果如下

總結：可以看到，IE盒模型的width是conteng+padding+boder的寬度，height是conteng+padding+boder的高度，所以width: 200px;height: 200px;是內容加內邊距加邊框的寬高

；而W3C標準盒模型的width是content的寬度，height是content的高度，width: 200px;height: 200px;是內容的寬高，內邊距和邊框會在保證內容寬高不變的情況下加在外圍的。

                                                                     W3C標準盒模型的寬和高 

                                                                               IE盒模型的寬和高