盒模型

盒模型分为标准盒模型和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

.standard {
            width: 100px; 
 3             height: 100px;
            padding: 20px;
            margin: 20px;
            border: 10px solid red;
            box-sizing: content-box;
            background-color: aqua;
           }
        
      .IE {
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 20px;
            border: 10px solid red;
            box-sizing: border-box;
            background-color: aquamarine;
           }
 <div class="standard">标准</div>
 <div class="IE">IE</div>    

 

 标准盒子大小 160px=width+padding*2+boder

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