box-sizing 属性决定元素宽高是否包含 padding 和 border，其主要值为 content-box（默认，宽高仅含内容，实际尺寸需加上 padding 和 border）和 border-box（宽高包含内容、padding 和 border，更利于布局控制），推荐全局设置为 border-box 以提升布局可预测性，尤其在响应式、grid 和 flexbox 布局中优势明显，且与 calc() 配合可精确控制尺寸，javascript 的 offsetwidth/height 会受其影响返回对应总尺寸。
box-sizing 属性决定了如何计算一个元素的总宽度和高度。 简单来说，它控制着 width 和 height 属性包含哪些部分。
解决方案
box-sizing 属性有两个主要的值：content-box 和 border-box。
立即学习“前端免费学习笔记（深入）”；
content-box(默认值): 元素的width和height只包含内容区域，不包括padding、border和margin。 也就是说，元素的实际宽度和高度是width + padding + border。 这经常会导致一些布局上的困扰，尤其是当你在设置固定宽度时，添加padding和border会超出预期。-
border-box: 元素的width和height包含内容区域、padding和border，但不包括margin。 这意味着你设置的width就是元素的总宽度，padding和border会在内容区域内部进行调整。 这使得布局更加可控，因为你不需要手动计算padding和border所占用的空间。
举个例子：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
}
.content-box {
box-sizing: content-box; /* 默认值，可以省略 */
}
.border-box {
box-sizing: border-box;
}对于 .content-box，它的实际宽度是 200px + 20px * 2 + 5px * 2 = 250px，高度是 100px + 20px * 2 + 5px * 2 = 150px。
对于 .border-box，它的实际宽度就是 200px，高度就是 100px。 padding 和 border 会挤压内容区域的空间。
什么时候应该使用 border-box？
几乎所有时候！ border-box 使得布局更加直观和易于管理。 通常，我们会使用以下 CSS 重置来将所有元素的 box-sizing 设置为 border-box：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}这种做法的原理是：先在 html 元素上设置 box-sizing: border-box;，然后让所有元素继承这个属性。 这样，你就可以在全局范围内使用 border-box 布局模型。
为什么 content-box 是默认值？
这是一个历史遗留问题。 在 CSS 规范的早期，content-box 是唯一可用的模型。 后来，border-box 被引入，但为了保持向后兼容性，content-box 仍然是默认值。 这就像为什么很多编程语言的数组索引从 0 开始一样，虽然可能不是最理想的设计，但改变它会破坏大量的现有代码。
box-sizing 对响应式设计有什么影响？
border-box 在响应式设计中尤其有用。 当你在创建灵活的布局时，使用 border-box 可以更容易地控制元素的尺寸，避免因为 padding 和 border 导致元素超出容器。 例如，你可以设置元素的宽度为 50%，然后添加 padding 和 border，而不用担心元素会超出父元素的宽度。
box-sizing 和 calc() 函数一起使用有什么技巧？
calc() 函数允许你在 CSS 中进行简单的数学运算。 当你在使用 border-box 时，calc() 可以帮助你更精确地控制元素的尺寸。 例如，你可以设置元素的宽度为 calc(100% - 20px)，然后添加 10px 的 padding，元素的总宽度仍然是父元素的 100%。
.container {
width: 300px;
}
.item {
width: calc(100% - 20px); /* 宽度是父元素的 100% 减去 20px */
padding: 10px;
box-sizing: border-box; /* 包含 padding */
}在这个例子中，.item 的内容区域的宽度会自动调整，以适应 padding 的空间，最终 .item 的总宽度仍然是 280px，即父元素的 100% - 20px。
box-sizing 会影响 JavaScript 获取元素尺寸吗？
会影响。 offsetWidth 和 offsetHeight 属性会返回元素的总宽度和高度，包括 padding、border 和滚动条（如果存在）。 因此，如果元素的 box-sizing 设置为 border-box，offsetWidth 和 offsetHeight 会返回你设置的 width 和 height。 如果 box-sizing 设置为 content-box，offsetWidth 和 offsetHeight 会返回 width + padding + border。 这在编写 JavaScript 代码时需要注意，特别是当你需要根据元素的尺寸进行一些计算时。
box-sizing 和 CSS Grid 布局有什么关系？
border-box 和 CSS Grid 布局配合使用可以简化很多复杂的布局问题。 例如，你可以使用 fr 单位来创建等分的列，然后为每个列添加 padding 和 border，而不用担心它们会破坏等分的效果。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建 3 列等宽的列 */
gap: 10px; /* 列之间的间距 */
}
.grid-item {
padding: 20px;
border: 1px solid black;
box-sizing: border-box; /* 包含 padding 和 border */
}在这个例子中，每一列的宽度都是父元素的 1/3，padding 和 border 会在列内部进行调整，不会影响列的总宽度。
box-sizing 和 CSS Flexbox 布局有什么关系？
和 Grid 类似，border-box 也能让 Flexbox 布局更加可预测。 例如，你可以设置 Flexbox 元素的 flex-basis 属性，然后添加 padding 和 border，而不用担心元素会超出容器。
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 33.33%; /* 占据 1/3 的空间 */
padding: 10px;
border: 1px solid black;
box-sizing: border-box; /* 包含 padding 和 border */
}同样，每个 Flexbox 元素的宽度都是父元素的 1/3，padding 和 border 不会影响元素的总宽度。
