不能。仅用{}不设置box-sizing属性则无影响；若强制 { box-sizing: border-box; }会破坏input、textarea等表单控件及第三方组件的原生渲染，导致错位、裁切等问题；推荐html { box-sizing: border-box; }配合, ::before, *::after { box-sizing: inherit; }，再对敏感元素如input, textarea, select, button, svg text显式重置为content-box。
通配选择器 *{} 会强制重置所有元素的 box-sizing 吗？
不会自动生效。仅写 * 不带任何声明，对 box-sizing 完全无影响；必须显式设置 box-sizing: border-box 才起作用。但这样做存在严重副作用：它会覆盖所有元素（包括 input、textarea、button 等表单控件）的原生盒模型行为，而某些浏览器对这些控件有特殊渲染逻辑，强行统一可能引发尺寸错位或交互异常。
为什么不能直接用 * { box-sizing: border-box; }
看似简洁，实则危险。常见问题包括：
-
input[type="search"]在 Safari 中出现内边距溢出或搜索图标错位 -
textarea的resize行为在 Firefox 下失常 -
button在旧版 Edge 中高度计算异常，文字被裁切 - 第三方 UI 组件库（如 Ant Design、Element Plus）内部已精细控制
box-sizing，全局覆盖会破坏其布局一致性
更稳妥的写法：用继承 + 显式重置
推荐组合使用 html 元素继承 + 选择器白名单，既覆盖绝大多数容器，又避开敏感控件：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
这样做的好处是：
-
html根元素设为border-box，后续所有子元素默认继承该值 -
*::before和*::after也继承，避免伪元素意外使用content-box - 表单控件仍可单独定义，例如：
input, textarea, select, button { box-sizing: content-box; }（按需添加） - 兼容 IE9+、所有现代浏览器，无需前缀
如果项目已用通配重置，如何排查 box-sizing 引发的布局 bug？
遇到元素宽度/高度不预期时，优先检查：
- 在 DevTools 中选中元素，看 Computed 面板里
box-sizing值是否为border-box，且width/height是否包含padding和border - 对比同级兄弟元素——若只有某个
div正常而input溢出，大概率是通配规则未排除表单元素 - 临时禁用样式表中含
*的规则，观察布局是否恢复，确认是否为根源 - 注意
iframe内部文档不受父页通配规则影响，勿误判
真正要小心的不是怎么写通配，而是哪些元素不该被它碰——表单控件、svg、canvas、以及所有通过 JS 动态注入并依赖原始盒模型计算的组件，都得留出豁免空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
