盒模型分為標準盒模型和IE盒模型

盒模型都由content（內容），padding(內邊距），boder(邊框)，margin(外邊距）組成

區分標準盒模型和IE盒模型

1：使用方法：

標準盒模型預設或者（box-sizing:content-box）IE盒模型（box-sizing:boder-box）

2:以寬度舉例：

標準盒子的大小=content（width）+padding+boder

IE盒子的大小=width(content+padding+boder

標準盒模型範圍=content（width）+padding+boder+margin

IE盒模型範圍=width(content+padding+boder)+margin

注意：margin不會計入盒子的實際大小，只是影響了盒子外部的範圍，盒子的範圍到boder為止，但是盒模型包括了margin

3：總結

標準盒模型padding會撐開盒子，但是IE盒子模型不會

舉例：

如程式碼所示，我們給兩個不同的盒子模型指定了相同的width,padding,boder,margin

 1 .standard {
 2             width: 100px; 
 3             height: 100px;
 4             padding: 20px;
 5             margin: 20px;
 6             border: 10px solid red;
 
 7             box-sizing: content-box;
 8             background-color: aqua;
 9            }
10         
11       .IE {
12             width: 100px;
13             height: 100px;
14             padding: 20px;
15             margin: 20px;
16             border: 10px solid red;
17             box-sizing: border-box;
 
18             background-color: aquamarine;
19            }
20  <div class="standard">標準</div>
21  <div class="IE">IE</div>    

 標準盒子大小 160px=width+padding*2+boder

  IE盒子大小    100px=width=content+padding+boder