如何使用 CSS 盒模型？
每个 CSS 元素本质上都是一个盒子。每个元素都是一个通用的盒子。
盒模型根据一些 CSS 属性解释元素的大小。
从内到外，我们有：
- 内容区域
- 内边距
- 边框
- 外边距
最好的方式是打开浏览器的开发者工具并查看它的显示：
在这里，你可以看到 Firefox 告诉我一个我突出显示的 span 元素的属性。我右键点击它，按下检查元素，然后转到开发者工具的布局面板。
你可以看到，浅蓝色的空间是内容区域。它周围有内边距、边框和外边距。
默认情况下，如果你在元素上设置了宽度（或高度），宽度将应用于内容区域。所有的内边距、边框和外边距计算都是在值的外部完成的，所以当你进行计算时，要记住这一点。
你可以使用 Box Sizing 更改这种行为。