推荐全局设置 box-sizing: border-box，用 , ::before , *::after { box-sizing: border-box; } 安全覆盖，但需排除 input、textarea 等表单元素以避免渲染异常，且须注意框架 scoped 样式或第三方库的干扰。
全局设置 box-sizing: border-box 是合理且推荐的
绝大多数现代项目都应该在初始化阶段就统一设为 border-box，它能避免因默认 content-box 导致的尺寸计算偏差——比如给一个 width: 200px 的元素加 padding: 10px 和 border: 1px，实际占位变成 222px，极易引发布局错位。
如何安全地全局覆盖
最稳妥的方式是用通配符重置，同时排除部分特殊元素。注意不能只写 * { box-sizing: border-box; }，否则会干扰 <input>、<textarea></textarea> 等表单控件在某些浏览器中的默认渲染行为。
*, *::before, *::after {
box-sizing: border-box;
}
<p>/<em> 恢复部分表单元素的默认行为（可选，视设计系统而定） </em>/
input,
textarea,
select,
button {
box-sizing: content-box;
}-
*::before和*::after必须显式包含，否则伪元素仍按content-box计算 - 若项目使用了第三方 UI 库（如 Ant Design、Element Plus），它们通常已自带
box-sizing重置，重复设置可能引发嵌套尺寸异常 - 不要用
html或body选择器替代通配符——它无法覆盖后代中动态插入的元素
为什么不用 inherit 或逐个设置
box-sizing 不继承，所以 html { box-sizing: border-box; } 对子元素完全无效；而手动给每个组件加样式既不可维护，也容易遗漏，尤其在多人协作或引入外部模块时。
- 所有浏览器都支持
box-sizing（IE8+），无兼容性顾虑 - 性能上无明显损耗，现代引擎对通配符的优化已很成熟
- 若项目需兼容极老环境（如 IE7），则必须放弃全局设置，改用 BEM 类名显式控制，例如
.u-box-border
Vue / React 项目中的特别注意点
框架组件常封装了内联样式或 scoped CSS，全局规则可能被局部样式优先级覆盖。尤其当使用 <style scoped></style> 时，* 选择器不会穿透作用域。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue 中，建议把重置规则放在未加
scoped的根<style></style>块里 - 在 React 中，确保重置 CSS 被最先加载（如在
index.css顶部） - 使用 CSS-in-JS（如 Emotion、Styled-components）时，需通过
Global组件注入，而非依赖普通import
全局设置本身不难，真正容易被忽略的是「哪些地方不该被覆盖」和「框架如何影响它的生效范围」——这两点出问题时，往往表现为某几个组件突然变宽或错位，排查起来反而比从头写还费时间。
