最优雅的盒模型重置是html设border-box后全局inherit，再显式排除表单控件；因*{box-sizing:border-box}会破坏select/textarea等原生控件渲染，并干扰伪元素及SVG缩放。
直接说结论：最优雅的盒模型重置不是靠 box-sizing: border-box 单独生效，而是让它全局生效 + 严格限定继承边界，同时避开表单控件的意外变形。
为什么不能只写 * { box-sizing: border-box }
看似一劳永逸，但实际会破坏原生表单控件（如 、）在某些浏览器中的默认渲染尺寸，尤其在 Safari 和旧版 Edge 中容易导致文字被截断或边框错位。更隐蔽的问题是，它会让伪元素（::before/::after）也强制继承，而它们常被用来做装饰性尺寸控制，不该被重置干扰。
- 必须排除
input[type="search"]和textarea等对内边距敏感的元素 - 伪元素需显式重置，不能依赖通配符继承
- SVG 元素不需要
border-box，加了反而可能影响viewBox缩放行为
推荐写法：两级作用域 + 显式覆盖
用 html 根元素设为 border-box，再用 inherit 向下透传，既保证继承链清晰，又避免通配符副作用。关键是在子级中对特定元素「撤回」或「重定义」。
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* 撤回对表单控件的影响 */
input,
textarea,
select,
button {
box-sizing: content-box;
}
/* 若需统一表单控件内边距，单独微调 */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
box-sizing: border-box;
}
注意：第二行的 *::before, *::after 不可省略 —— 否则自定义 tooltip 或图标伪元素会沿用浏览器默认的 content-box，导致尺寸计算错乱。
兼容性与性能要注意的点
box-sizing: border-box 在 IE8+ 和所有现代浏览器中完全支持，无需前缀。但有两点容易被忽略：
- 使用
rem或em设置padding/border时，border-box下的尺寸仍是「包含」关系，别误以为能绕过字体大小影响 - 在 CSS-in-JS 或 Shadow DOM 场景中，该规则不会穿透到封闭 shadow root 内部，需在组件内部单独声明
- 若项目用了
all: unset重置，它会清掉box-sizing，必须在之后重新设置
真正优雅不在于代码多短，而在于它不悄悄改掉你没想动的地方 —— 尤其是那些你半年后才在某个下拉菜单里发现的错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
