css box sizing 全局设置是否合理_项目初始化建议

推荐全局设置 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; }，否则会干扰 、 等表单控件在某些浏览器中的默认渲染行为。

*, *::before, *::after {
  box-sizing: border-box;
}
/ 恢复部分表单元素的默认行为（可选，视设计系统而定） /
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，全局规则可能被局部样式优先级覆盖。尤其当使用 时，* 选择器不会穿透作用域。

• 在 Vue 中，建议把重置规则放在未加 scoped 的根 块里
• 在 React 中，确保重置 CSS 被最先加载（如在 index.css 顶部）
• 使用 CSS-in-JS（如 Emotion、Styled-components）时，需通过 Global 组件注入，而非依赖普通 import

全局设置本身不难，真正容易被忽略的是「哪些地方不该被覆盖」和「框架如何影响它的生效范围」——这两点出问题时，往往表现为某几个组件突然变宽或错位，排查起来反而比从头写还费时间。