box-sizing: border-box 能减少重排，因为它使 width/height 始终代表元素最终占位尺寸，修改 padding 或 border 仅内部挤压内容区，不改变外轮廓，从而避免触发布局引擎重新计算周围元素位置。
box-sizing: border-box 为什么能减少重排
浏览器在计算元素尺寸时，如果用的是默认的 content-box 模式，每次改 padding 或 border 都会触发重排——因为内容区宽度不变，但总占用空间变大，布局引擎得重新计算周围元素位置。而设成 border-box 后，width 和 height 始终代表“最终占位大小”，改内边距或边框只是内部挤压，不改变外轮廓，自然避开大量隐式重排。
全局设置最省事，但要注意两点：
- 必须放在所有样式之前，否则被后续规则覆盖就失效
-
* { box-sizing: border-box; }在某些旧版 Android WebView 中有轻微性能开销，可退为html { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }
哪些地方改 box-sizing 反而拖慢渲染
不是所有元素都适合统一设 border-box。以下场景容易出问题：
- 用
transform: scale()缩放的容器里嵌套了border-box元素，缩放后 padding/border 的像素值可能被非整数渲染，引发 subpixel 绘制和额外合成层 - 第三方 UI 库（如 Ant Design）内部已精细控制
box-sizing，强行全局覆盖可能导致按钮、输入框等组件高度错乱 - 需要精确控制 content 区域尺寸的 canvas 或 video 容器，设成
border-box后再动态调整padding，容易让 JS 获取的clientWidth和实际绘制区域不一致
合并 padding/border 导致的 CSS 文件体积膨胀怎么解
很多人以为 border-box 能简化代码，结果写出一堆 padding: 12px 16px; border: 1px solid #ccc; 这类固定值，反而让 CSS 体积变大、复用率下降。真正高效的写法是：
- 把常用组合抽成工具类，比如
.pad-12、.bd-solid，而不是每个元素都写完整声明 - 避免在媒体查询里重复写相同
box-sizing，它本身不随断点变化，应提至顶层 - 构建时用 PostCSS 插件（如
postcss-discard-duplicates）自动去重，比手写!important强制覆盖更安全
box-sizing 对首屏关键路径的影响常被忽略
CSS 解析是阻塞渲染的，而 box-sizing 属于基础盒模型属性，浏览器必须在布局阶段就确认它的值。如果它分散在多个文件里（比如 reset.css 里设了 content-box，base.css 又覆盖成 border-box），浏览器就得等两个文件都下载完才能开始计算布局——这比单个合并后的 CSS 多一次网络往返。
所以关键点是：
-
box-sizing相关规则必须收进首屏加载的主 CSS 文件，不能靠@import或异步加载 - 不要用 JS 动态插入
style标签来设它，JS 执行晚于 CSS 解析，此时布局早已开始 - 若用 CSS-in-JS 方案（如 Emotion），确保
box-sizing声明在第一个css模板字符串里，否则可能被注入到 body 后面
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
