CSS Box Sizing
CSS Box Sizing
CSS box-sizing 属性允许我们将内边距和边框包含在元素的总宽度和高度中。
没有 CSS box-sizing 属性
默认情况下，元素的宽度和高度计算方法如下：
width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常会比您设置的要大（因为元素的边框和内边距会加到元素指定的宽度/高度上）。
下图显示了两个具有相同指定宽度和高度的 <div> 元素。
这个 div 较小（宽度为 300px，高度为 100px）。
这个 div 较大（宽度也为 300px，高度为 100px）。
上面的两个 <div> 元素在结果中具有不同的尺寸（因为 div2 指定了内边距）。
示例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
自己动手试一试 »
box-sizing 属性解决了这个问题。
使用 CSS box-sizing 属性
CSS box-sizing 属性允许我们将内边距和边框包含在元素的总宽度和高度中。
如果您为元素设置 box-sizing: border-box;，则内边距和边框会包含在宽度和高度中。
现在这两个 div 的尺寸相同了！
太棒了！
下面是与上面相同的示例，在两个 <div> 元素中都添加了 box-sizing: border-box;。
示例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
自己动手试一试 »
由于使用 box-sizing: border-box; 的结果要好得多，许多开发者希望他们页面上的所有元素都能以这种方式工作。
下面的代码确保所有元素都以这种更直观的方式进行尺寸调整。许多浏览器已经为许多表单元素（但并非所有元素，这就是为什么 input 和 textarea 在 width: 100% 时看起来不同）使用了 box-sizing: border-box;。
将此应用于所有元素是安全且明智的。
CSS Box Sizing 属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素的宽度和高度如何计算：是否包含内边距和边框 |
