CSS盒子模型

CSS盒子模型包含2种：

1. W3C标准盒子模型（box-sizing: content-box 默认值）

2. IE怪异盒子模型 （box-sizing: border-box）

---

W3C标准盒子模型

标准盒模型的 width 和 height 属性的范围只包含了 content，因此宽高不受 padding、border 影响

元素的宽度和高度仅包括内容区域（content），不包括内边距（padding）、边框（border）和外边距（margin）。

div的width = content的width

div的height = content的height

假设一个元素设置 width: 100px; height: 100px; padding: 10px; border: 5px solid black;，则该元素的总宽度和高度为：

• 总宽度 = 100px（内容宽度） + 10px（左内边距） + 10px（右内边距） + 5px（左边框） + 5px（右边框） = 130px
• 总高度 = 100px（内容高度） + 10px（上内边距） + 10px（下内边距） + 5px（上边框） + 5px（下边框） = 130px

---

IE怪异盒子模型

IE怪异盒子模型的 width 和 height 属性的范围包含了 border、padding 和 content，因此宽高受 padding 、 border 影响

元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

div的width = content的width + padding-left + padding-right + border-left + border-right

div的height = content的height + padding-top + padding-bottom + border-top + border-bottom

假设一个元素设置 width: 100px; height: 100px; padding: 10px; border: 5px solid black;，则该元素的总宽度和高度均为100px，因为内边距和边框的宽度已经包含在指定的宽度和高度内。

---

CSS3 指定盒子模型种类

CSS3 box-sizing属性

IE5.5及更早的版本使用的是IE盒模型（这意味着此盒模型问题只会出现在IE5.5及其更早的版本中）。

IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。