CSS box-sizing 语法
在 CSS 中，box-sizing 属性用于定义元素盒子模型的计算方式：是只包含内容区域，还是包含内边距（padding）和边框（border）。
语法：
box-sizing: 关键字;说明：
box-sizing 的取值有 2 种，如下表所示。
| 取值 | 说明 |
|---|---|
| content-box（默认值） | width 和 height 只包括内容的宽高，不包括 boder、padding |
| border-box | width 和 height 不仅包括内容的宽高，还包括 border 和 padding（不包括 margin） |
对于 box-sizing 属性，我们要清楚以下几点。
- box-sizing 属性不影响外边距（margin），外边距始终在元素的边框外部。
- box-sizing: border-box; 元素计算宽高时，是不包含 margin 的。
- box-sizing: border-box; 可以让布局更容易控制，因为它使得元素的指定宽度和高度就是它在页面上占据的实际空间大小，无论你添加了多少内边距或边框。
提示: 绿叶网在开发的时候，也是将所有元素的 box-sizing 设置为 border-box，这样可以更好地进行布局设计。
CSS box-sizing 摘要
| 属于 | CSS 盒子模型 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | content-box |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS box-sizing 示例
接下来，我们通过几个简单的例子来讲解一下 CSS box-sizing 属性是如何使用的。
示例 1：box-sizing: content-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
padding: 50px;
border: 10px solid hotpink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行之后，页面效果如下图 1 所示。然后我们在浏览器上单击 F12，然后鼠标选中 div 元素，可以看到它的盒子模型，如下图 2 所示。
分析：
默认情况下，元素使用的是 box-sizing: content-box;。在上图中，蓝色框代表的是 content，它的宽度是 width（200px）、高度是 height（100px）。绿色框的宽度是 padding（50px），橙色框的宽度是 border（10px）。
因此，整个盒子的宽度为 300+50*2+10*2=420px、高度为 200+50*2+10*2=320px。
示例 2：box-sizing: border-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: flex; /* 使用 flex 布局以便元素并排 */
width: 400px;
}
.box1, .box2 {
box-sizing: border-box;
width: 50%;
padding: 20px;
}
.box1 {
border: 10px solid red;
background-color: lightsalmon;
}
.box2 {
border: 10px solid green;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 container 设置了 display: flex;，此时它内部的子元素（box1 和 box2）能够弹性布局并默认并排显示，并且容器的总宽度固定为 400px。
由于 box1 和 box2 都使用了 box-sizing: border-box;。这意味着这两个元素的 width 属性定义的是整个盒子的总宽度，包含了 padding 和 border 的宽度，而不是像默认的 content-box 那样只定义内容的宽度。
box1 和 box2 的 width 都被设置为 50%。由于父容器 container 的宽度是 400px，所以根据 border-box 模型，每一个 box 元素的总宽度（包括内容、内边距和边框）都被计算为 400px * 50% = 200px。
提示: 小伙伴们可以自行到浏览器控制台中查看这两个元素的盒子模型尺寸。
示例 3：将 box-sizing: border-box; 应用于所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 将 box-sizing: border-box; 应用于所有元素 */
*, *::before, *::after {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
padding: 50px;
border: 10px solid hotpink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>运行之后，页面效果如下图 1 所示。然后我们在浏览器上单击 F12，然后鼠标选中 div 元素，可以看到它的盒子模型，如下图 2 所示。
分析：
在真实的项目开发中，我们会使用 CSS Reset 来重置元素的默认样式。在 CSS Reset 中，一个非常常见的做法是使用通配符选择器（*）以及伪元素 ::before 和 ::after，来将 box-sizing: border-box; 应用于页面上的所有元素。
这样做的好处是使得所有元素的尺寸计算方式统一，大大简化了布局时的尺寸计算，避免了因为内边距和边框导致的意外尺寸增加。
