box-sizing: border-box使width/height包含padding和border，解决布局错位；全局启用推荐* {box-sizing: border-box;}，需统一设置避免flex/grid计算偏差，不影响calc()逻辑但提升可预测性。
box-sizing: border-box 是什么
它让元素的 width 和 height 包含 padding 和 border，而不是默认的只算内容区。这是解决“设了 200px 宽，加个 10px padding 就撑到 220px”这类布局错位问题的核心开关。
怎么全局启用 border-box
最稳妥的做法是用通配符重置（注意性能影响极小，现代浏览器已优化）：
* {
box-sizing: border-box;
}这样所有元素——包括 input、textarea、button 等原生控件——都会按 border-box 计算尺寸。如果不希望影响某些特殊组件（比如需要精确控制内边距的图标按钮），可以改用更保守的选择器：
-
*, *::before, *::after—— 更完整，覆盖伪元素 -
html元素上单独设一次，再用inherit向下传递（适合 CSS-in-JS 或 scoped 场景）
为什么不能只对容器设 border-box
因为子元素如果仍用默认的 content-box，你在父容器里用 flex 或 grid 布局时，子项的实际占用宽度会和你写的 width: 33% 不一致——尤其当它们有 padding 或 border 时。常见表现：
立即学习“前端免费学习笔记（深入）”；
- 三列 flex 布局，最后一列换行
- 表格单元格内容溢出或挤压
- 响应式栅格在小屏下错位
所以必须统一，不能“挑着设”。
border-box 对 calc() 和百分比的影响
它不改变 calc() 的计算逻辑，但会让结果更可预测。例如：
.card {
width: calc(50% - 20px); /* 减去的是 margin，不是 padding */
padding: 16px;
border: 1px solid #ccc;
}在 border-box 下，这个 .card 最终宽度就是 50% - 20px，内部留白由 padding 和 border 挤占内容区；而 content-box 下，最终宽度是 50% - 20px + 34px（16×2 + 1×2），极易失控。
真正容易被忽略的是：某些第三方 UI 库（如早期 Bootstrap 3）默认没设 border-box，如果你项目里混用了它们的 CSS 和自定义样式，务必检查是否被重置覆盖——可以用 DevTools 查看 computed 样式里的 box-sizing 值。
