对CSS盒子模型的理解？

目录

1、盒子模型的类型

2、标准盒子模型

3、IE盒子模型

4、如何互相转换

5、浏览器兼容性及其他

---

1、盒子模型的类型

由于浏览器的差异性，盒子模型分为 标准盒子模型（W3C 的规范） 和 IE盒子模型（老的 IE 浏览器在怪异模式下使用自己的非标准模型）

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

2、标准盒子模型

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

width = content

② 盒子的大小由元素设置的宽高、边框和内边距决定；

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

③ 设置以下CSS样式呈现的效果：

{
    width: 300px;
    height: 300px;
    padding: 50px;
    border: 50px;
}

在标准盒子模型下，盒子实际的宽度是500px

  

3、IE盒子模型

① 元素的 width 和 height 不仅包含content，还包含 border 和 padding；

width = content + border-width * 2 + padding-left + padding-right;

height = content + border-width * 2 + padding-top + padding-bottom;

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

盒子的宽 = width盒子的高 = height

③ 设置以下CSS样式呈现的效果：

{
    width: 300px;
    height: 300px;
    padding: 50px;
    border: 50px;
}

在标准盒子模型下，盒子实际的宽度是300px

 

4、如何互相转换

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

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

5、浏览器兼容性及其他

① 只要设置了合适的 DTD，大多数浏览器会按照标准盒子模型来显示

但是 IE5.X 和 6 在怪异模式下会根据 IE 盒子模型进行显示。

② 标准盒子模型下元素的 box-sizing 属性（IE8+）默认值为 content-box，将它设置成 border-box 可转换为 IE 盒模型。

在实际应用场景中，若想控制元素总宽高保持固定，这个设置很有用。

③ 元素的宽（width）、高（height）、边框（border）、内边距（padding）、外边距（margin）都是盒子模型的重要组成部分

但是盒子模型的大小只与元素的宽高、边框、内间距有关，外边距只影响盒子所占外围空间的大小。