对盒子模型的理解

由于浏览器的差异性，盒模型分为 标准盒模型 和 IE盒模型

它们的呈现方式和对盒子大小的计算略有不同。

<div class="box_1"></div>
<div class="box_2"></div>

.box_1 {
    width: 100px;
    height: 100px;  
    background-color: #FFB5BF;
    border: 5px solid #94E8FF;
    padding: 10px 20px 30px;
    margin: 10px;
 }
.box_2 {
    width: 100px;
    height: 100px;  
    background-color: #FFB5BF;
    border: 5px solid #94E8FF;
    padding: 10px 20px 30px;
    margin: 10px;
    box-sizing: border-box;   /* 较 box_1 新增加的属性 */
}

效果图：

以上两张图便是两种盒模型的差异体现

.box_1 是标准盒模型，是 W3C 的规范；

.box_2 是老的 IE 浏览器在怪异模式下使用自己的非标准模型，也可称为 IE 盒模型

在标准盒模型下通过设置 box-sizing: border-box; 可转换为 IE 盒模型

1、标准盒模型

01. 元素的 width 和 height 只包含 content，不包含 border 和 padding 值；

02. 盒子的大小由元素的宽高、边框和内边距决定

盒子的宽 = width + border-width * 2 + padding-left + padding-right

盒子的高 = height + border-width * 2 + padding-top + padding-bottom

2、IE盒模型

01. 元素的 width 和 height 不仅包含content，还包含 border 和 padding

02. 盒子的大小取决于元素的宽和高，修改边框和内边距的值不能改变盒子的大小

盒子的宽 = width

盒子的高 = height

 

3、浏览器兼容性及其他

• 只要设置了合适的 DTD，大多数浏览器会按照标准盒模型来显示，但是 IE5.X 和 6 在怪异模式下会根据 IE 盒子模型进行显示。

• 标准盒模型下元素的 box-sizing 属性（IE8+）默认值为 content-box，将它设置成 border-box 可转换为 IE 盒模型。在实际应用场景中，若想控制元素总宽高保持固定，这个设置很有用。

• 元素的宽（width）、高（height）、边框（border）、内边距（padding）、外边距（margin）都是盒子模型的重要组成部分，但是盒子模型的大小只与元素的宽高、边框、内边距有关，外边距只影响盒子所占外围空间的大小。