CSS 中的 box-sizing 属性用于定义如何计算元素的总宽度和高度。默认情况下，元素的宽度和高度包括其内容、填充和边框。但是，使用 box-sizing 属性，您可以更改此行为，以在宽度和高度计算中包含或排除填充和边框。
在旧版本的 CSS （CSS2） 中，盒模型的默认工作方式使元素看起来比传递给它的尺寸（宽度和高度）更大。
- 宽度 + 填充 + 边框 = 元素框的实际可见/渲染宽度
- 高度 + 填充 + 边框 = 元素框的实际可见/渲染高度
CSS 框大小调整属性
CSS box-sizing 属性可用于调整元素布局的行为。
可能的值
box-sizing CSS 属性可以具有以下值之一，即关键字：
- content-box：这是默认值。当此值传递给 box-sizing 属性时，它将返回默认行为，其中填充或/和边框将添加到元素的总宽度和高度中。
- border-box：当此值传递给 box-sizing 属性时，它会告诉浏览器调整传递给元素的填充或边距值。这导致缩小内容区域并吸收为元素指定的边框或/和填充。它是用于 <table>、<select>、<button> 和 <input> 元素的默认样式。
padding-box 值不受任何浏览器支持，因此无法传递给 box-sizing 属性。
适用于
所有接受宽度或高度的 HTML 元素。
DOM 语法
object.style.boxSizing = "content-box | border-box";
例
以下是 CSS 属性框大小调整的示例： border-box：
<html>
<head>
<style>
.with-content-box {
width: 200px;
height: 100px;
padding: 10px;
border: 3px solid green;
background-color: rgb(241, 234, 85);
box-sizing: content-box;
}
.with-border-box {
width: 200px;
height: 100px;
padding: 10px;
border: 3px solid rgb(64, 10, 215);
background-color: lightpink;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="with-content-box">CONTENT BOX</div><br />
<div class="with-border-box">BORDER BOX</div>
</body>
</html>
上面给出的示例显示了 box-sizing： border-box 和 box-sizing： content-box 属性值之间的明显差异。这里 box-sizing： border-box 属性在计算总宽度和高度时忽略了填充值。而 box-sizing： content-box 属性值在计算中包括填充值。
为了实现流畅、流畅和直观的响应式设计，可以按以下方式设置 box-sizing： border-box 值：
* {
box-sizing: border-box;
}
上述语法可能无法给出预期的结果，因为它忽略了伪元素。因此，还有另一种语法，其中包括用于重置的伪元素。
*, *:before, *:after {
box-sizing: border-box;
}
这种通用的盒子大小调整方法将使 box-sizing： content-box | padding-box 的使用变得困难。因此，在这种情况下，还有一种语法可能更有用和更贴切。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
这种通用的框大小重置语法更有用，并为用户提供了更大的灵活性。
尽管每个当前浏览器都支持框大小：border-box，无前缀;但是一些旧版本的浏览器需要支持。为了提供该支持，您可能需要按以下方式使用前缀 -webkit 和 -moz：
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
