应全局设置 box-sizing: border-box 以避免 border 导致宽度超出预期，通过 *, *::before, *::after { box-sizing: border-box; } 统一尺寸基准，并对表单控件及特殊作用域显式声明。
border 叠加让元素总宽度超出预期
当给一个 width: 200px 的元素加上 border: 2px solid #000，实际占位变成 204px（左右 border 各 2px），这是默认 box-sizing: content-box 的行为。它把 border 和 padding 算在 width 外面，导致布局错位、栅格塌陷、响应式断点偏移。
用 box-sizing: border-box 统一重定义尺寸基准
这个属性让 width 和 height 包含 content + padding + border，不再“额外膨胀”。关键是要全局生效，避免漏改个别元素：
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素（包括伪元素）都按 border-box 计算，后续写 width: 100% 或固定像素值时，结果可预测。注意：IE8+ 支持，无需前缀。
为什么只设父容器不够？
常见错误是只给外层容器加 box-sizing: border-box，但子元素（比如 input、button、textarea）仍保持浏览器默认的 content-box，导致内部对齐错乱：
立即学习“前端免费学习笔记（深入）”；
-
input默认有border和padding，若没继承border-box，width: 100%会撑破父容器 - 第三方 UI 库组件可能重置了
box-sizing，需检查 computed style 确认 - 某些 reset.css 会漏掉
*::before, *::after，导致伪元素仍按 content-box 计算（比如清除浮动的::after）
遇到 inline 元素或表单控件要特别留意
像 input、select 这类原生控件，部分浏览器（如旧版 Safari）对其 box-sizing 支持不一致，稳妥做法是显式声明：
input, select, textarea, button {
box-sizing: border-box;
}另外，border-collapse: collapse 的表格里，border 不叠加但会共享，此时 box-sizing 不起作用——表格单元格的尺寸逻辑独立，别试图用它修正 table 布局。
真正容易被忽略的是：当你用 CSS-in-JS 或 Shadow DOM 时，* { box-sizing: border-box } 可能无法穿透作用域，得在对应 scope 内重复声明。
