box-sizing: border-box 将 width/height 解释为总宽高，padding 和 border 从其中内减，内容区自动收缩，解决标准盒模型中尺寸溢出导致的布局错乱。
box-sizing: border-box 是什么，为什么能解决盒模型错乱
默认情况下，CSS 的 width 和 height 只控制内容区域尺寸，而 padding 和 border 会额外撑大元素——这就是「标准盒模型」。当你设 width: 300px; padding: 20px; border: 5px solid，实际占用宽度是 350px，极易导致 flex 或 grid 布局中子项溢出、换行或对不齐。
box-sizing: border-box 把 width/height 解释为「最终渲染的总宽高」，padding 和 border 从这个尺寸里内减，内容区自动收缩。这是现代布局稳定性的基础设定。
全局设置 box-sizing: border-box 的正确写法
不能只给某个容器加，必须从根节点开始统一重置，否则第三方组件或未覆盖元素仍按默认行为计算，错乱照旧。
推荐在 CSS 开头写：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
注意三点：
-
*本身不匹配伪元素，所以必须显式加上*::before和*::after，否则 ::before 生成的内容仍用 content-box - 不要用
html { box-sizing: border-box }这种写法——它不继承，子元素不会自动获得该值 - 某些老项目用了
reset.css或normalize.css，需确认它们是否已包含此规则，避免重复或冲突
哪些场景下 border-box 仍会失效或引发新问题
box-sizing: border-box 不是银弹。以下情况它不起作用或需要额外处理：
- 当元素设置了
min-width或max-width，且值小于padding + border总和时，内容区可能被压缩到 0 或触发滚动条 - 使用
transform: scale()后，border-box的尺寸计算不受影响，但视觉尺寸变了，容易误判布局空间 - 表格单元格（
<td>）默认忽略 <code>box-sizing，需单独声明才能生效 - 内联元素（如
<span></span>）设了width但未转为display: block或inline-block，box-sizing无效
对比 demo：content-box vs border-box 的实际表现差异
假设一个卡片容器，设计稿要求「固定 320px 宽，左右各 16px 内边距，2px 边框」：
错误写法（默认 content-box）：
.card {
width: 320px;
padding: 0 16px;
border: 2px solid #ccc;
}
→ 实际宽度 = 320 + 16×2 + 2×2 = 356px，超出预期
正确写法（加 border-box）：
.card {
width: 320px;
padding: 0 16px;
border: 2px solid #ccc;
box-sizing: border-box;
}
→ 渲染宽度严格为 320px，内容区自动变成 320 − 32 − 4 = 284px
如果还叠加了 flex: 1 或 grid-column: span 2，这种差额会直接破坏整行对齐——这也是最常被忽略的「错乱源头」。
