box-sizing: border-box 是唯一能真正让边框“不撑开”元素的方案；它将 border 和 padding 纳入声明的 width/height 内，避免 content-box 下因边框额外叠加导致的溢出、换行与布局塌陷。
box-sizing: border-box 是唯一能真正让边框“不撑开”元素的方案；默认 content-box 下，border 总是额外加在你写的 width 和 height 之外，这是溢出、错行、flex 布局塌陷的常见根源。
为什么 border 在 content-box 下必然导致尺寸失控
浏览器默认用 content-box 解析尺寸：你写 width: 300px，它只管内容区；再加 border: 2px solid #000，实际总宽就变成 300px + 4px（左右各 2px）。如果父容器刚好是 width: 300px，子项就会横向溢出——哪怕你没写 padding，仅边框就足以破坏栅格或 flex 排列。
- 常见错误现象：
display: flex下两个width: 50%的子项换行了，原因就是各自边框多占了几个像素 - 表单控件（如
input[type="text"]）自带 UA 样式边框，未重置box-sizing时，width: 100%几乎必然溢出容器 -
border-style: double或inset等复杂样式，其实际渲染宽度仍按 border-width 计算，但视觉上更难察觉偏差
border-box 如何改变 border 的参与方式
box-sizing: border-box 不是隐藏边框，而是把 border（连同 padding）纳入你声明的 width 和 height 范围内。你写 width: 300px; border: 2px solid #000，那这 300px 就是“内容区 + 左右 padding + 左右 border”的总和，内容区会自动收缩来腾出空间。
- 边框宽度必须显式声明：只写
border: 2px不合法，必须是三元组，例如border: 2px solid currentColor，否则部分浏览器可能回退到content-box行为 - 圆角
border-radius不影响box-sizing计算逻辑，但会裁剪 border 绘制区域，实际视觉宽度不变 - 当
border使用渐变色（border-image）时，box-sizing依然生效，但border-image-slice的数值需按 border 区域本身理解，而非内容区
全局重置时 border 相关的坑
光写 * { box-sizing: border-box } 不够，伪元素若漏掉，::before 生成的装饰性边框（比如图标、分隔线）仍走 content-box，悄悄撑开布局。
立即学习“前端免费学习笔记（深入）”；
- 正确写法必须包含伪元素：
*, *::before, *::after { box-sizing: border-box; } - 第三方 UI 库（如 Element Plus）可能对
input、button等元素强制设box-sizing: content-box !important，需单独覆盖：input, button { box-sizing: border-box !important; } - SVG 元素（
<rect></rect>、<circle></circle>）完全无视box-sizing，其width/height永远只算 content，边框永远额外叠加——这里只能靠transform: scale()或 viewBox 调整
真正麻烦的不是记不住 border-box，而是旧项目里混着两种模型：某处写了 width: 200px; padding: 10px，另一处又依赖它“撑开”来对齐，改一个就得全盘校验。所以重置之后，第一件事不是调样式，而是检查所有带 border 的固定宽高元素是否还符合视觉预期。
