盒模型概念

CSS盒模型是前端开发中一个基础而重要的概念。它描述了一个HTML元素如何在页面中占据空间，以及如何与其他元素交互。盒模型包含内容区域、内边距、边框和外边距。

标准盒模型content-box

宽高计算

1. 元素的宽度和高度包括内容（content）
2. 不包括：内边距（padding）、边框（border）和外边距（margin）

实际宽度计算

实际宽度 = width + padding + border

如何设置标准盒模型

在CSS中，可以通过box-sizing属性来设置盒模型的类型。如果你没有明确设置box-sizing属性，浏览器将默认使用标准盒模型。

.element {
  box-sizing: content-box;
}

IE盒模型border-box

1. 元素的宽度和高度包括内容（content）、内边距（padding）和边框（border）
2. 不包括：外边距（margin）

实际宽度计算

实际宽度 = width

如何设置标准盒模型

.element {
  box-sizing: border-box;
}