CSS盒子模型（内容区、边框、内外边距）

CSS盒子模型定义了如何将边框、内边距和外边距放入正确的位置以创建元素框。CSS盒子模型有两种：标准模型和IE模型。

标准模型的宽度和高度只包含内容区，不包含边框和内外边距。IE模型的宽度和高度包含内容区、边框和内外边距。

CSS中可以通过box-sizing属性来指定使用哪种模型：

/* 标准模型 */
element {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 15px;
}
 
/* IE模型 */
element {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 15px;
}

在标准模型中，元素的宽度和高度计算如下：

宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距

高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度 + 上外边距 + 下外边距

在IE模型中，元素的宽度和高度包含了内容区、内边距和边框，但不包括外边距：

宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度

高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度

通过指定box-sizing属性，可以在不同模型之间切换。如果你想要确保跨浏览器的一致性，最好明确设置box-sizing属性。