box-sizing: border-box 是必须加的，不是可选项；默认 content-box 下 width/height 不含 padding 和 border，导致尺寸溢出、换行等布局问题，须全局声明 , ::before, *::after { box-sizing: border-box; } 并覆盖表单控件、flex/grid 子项及打印样式。
box-sizing: border-box 是必须加的，不是可选项
元素尺寸比预期大，90% 是因为 box-sizing 还在默认的 content-box。比如设了 width: 200px，又加了 padding: 12px 和 border: 1px，实际宽度就是 200 + 24 + 2 = 226px——这不是 bug，是规范行为，但会直接导致溢出、换行、滚动条意外出现。
现代项目里，box-sizing: border-box 应该是 CSS 入口第一条规则，且必须覆盖伪元素：
*,
*::before,
*::after {
box-sizing: border-box;
}
这条规则得放在所有自定义样式之前，否则会被后续声明覆盖；如果用了第三方 UI 库（如旧版 Bootstrap），要确认它没用 !important 把你重置掉。
input、textarea、select 等表单控件必须单独处理
这些元素在 Safari、部分安卓 WebView 中不继承父级 box-sizing，哪怕你写了通配符，它们内部依然按 content-box 计算。结果就是 JS 调用 getBoundingClientRect().width 返回值偏大，或者横向滚动条偷偷出现。
显式声明能堵住这个漏：
input,
textarea,
select,
button {
box-sizing: border-box;
}
若用的是 Vant 或 Element Plus 这类组件库，某些封装后的 input 可能被更具体的选择器覆盖，就得加 !important 或提高选择器权重，例如：input.van-field__control { box-sizing: border-box !important; }
Flex/Grid 子项不能只靠继承，得显式设
box-sizing 不会从 Flex 或 Grid 容器继承到子项。即使容器设了 box-sizing: border-box，子项仍是 content-box，会导致 flex-basis 或 grid-template-columns 的计算失准。
常见表现：三列 1fr 布局中，某列文字挤在一起；或 minmax(200px, 1fr) 实际最小宽度变成 204px（多出 border: 2px）。
稳妥做法是给容器子项统一加：
.grid-container > *,
.flex-container > * {
box-sizing: border-box;
}
别依赖通配符自动生效——Flex/Grid 的子项层级容易被忽略，尤其当嵌套了 div 包裹层时。
打印样式和伪元素是两个静默失效点
@media print 下，浏览器会重置 UA 样式，box-sizing 默认回退到 content-box。如果你的打印页有带 padding 的卡片或表格，很可能横向溢出或截断。
解决方案是在打印媒体查询里显式补上：
@media print {
*,
*::before,
*::after {
box-sizing: border-box !important;
}
}
另一个静默失效点是伪元素：::before 和 ::after 即使被 * 匹配，也常因渲染时机或 UA 样式干扰而走回 content-box。所以通配符那条必须包含 *::before 和 *::after，少一个都不行。
真正容易被跳过的是这三件事：伪元素重置、表单控件单独声明、打印上下文显式覆盖——它们不会报错，但会在特定场景下让布局悄悄崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
