全局设置 box-sizing: border-box 更安全，因局部设置易致子元素尺寸失控、需补丁式修复；应统一重置所有元素盒模型，再对第三方组件根容器隔离还原 content-box，避免动画中动态切换该属性引发重排掉帧。
为什么全局设置 box-sizing: border-box 是更安全的选择
因为局部设置会埋下尺寸失控的隐患——你给一个 .card 加了 box-sizing: border-box，但它里面的 input、button、span 依然按默认的 content-box 计算，结果 padding 一加，宽度就撑出容器，还得靠 calc() 或负 margin 补救。这种“打补丁式写法”不是布局，是调试。
- 浏览器每帧都要重新解析盒模型，尤其在滚动或动画中，频繁重排直接掉帧
- 第三方 ui 库（比如旧版 bootstrap 的表单控件）可能依赖
content-box，但它们通常只影响特定组件，而非整页 - 真正需要隔离的不是所有元素，而是第三方组件的根容器——用
.third-party-wrapper *单独重置即可
怎么写才既有效又不破坏第三方组件
最稳妥的写法是：对所有元素及其伪元素统一设 box-sizing: border-box，同时把第三方组件包进带 class 的 wrapper 里，并在该 wrapper 内部“还原”部分默认行为。
- 基础重置必须包含：
*, *::before, *::after { box-sizing: border-box; } - 对已知依赖
content-box的组件，加一层隔离：.ant-input-wrapper *, .el-input__inner { box-sizing: content-box !important; } - 不要用
* { margin: 0; padding: 0; }一刀切——它会清掉button和input的原生内边距，导致点击热区变小或文字贴边
为什么别在动画元素上动态切换 box-sizing
box-sizing 是一个触发同步布局（Layout）的属性，无法硬件加速，也不能被浏览器跳过计算。一旦你在 @keyframes 或 js 中动态改它，等于每帧都强制重排。
- 现象：滚动卡顿、动画掉帧、DevTools 的 “Layout” 面板频繁亮起
- 替代思路：动画只动
transform和opacity；间距控制交给gap或容器级padding - 如果真要响应式缩放盒子，用
scale()+ 固定width/height，而不是靠改box-sizing来“假装”尺寸变了
padding/margin 用来占位？这是盒模型滥用的起点
用 padding-top: 24px 模拟标题间距，或用 margin-left: auto 居中一个按钮，短期省事，长期难维护。这类写法让样式逻辑和视觉表现死死绑在一起，改个间距就得翻 5 个文件。
立即学习“前端免费学习笔记（深入）”；
- 结构对齐一律走
display: flex或display: grid，它们的justify-content/gap不触发重排 - 垂直留白优先用父容器的
gap，而不是子元素的margin-bottom - 嵌套多层
padding（如.card > .body > p各设 16px）会导致实际间距变成 48px，但开发者 inspect 时根本看不出叠加路径
真正容易被忽略的，是盒模型重置不是“设完就完”的一次性操作——它得和你的布局策略、第三方组件加载顺序、甚至 css 作用域（比如 Shadow dom）一起考虑。一个没被包裹的 input 在 border-box 下突然变窄，往往不是 reset 写错了，而是它被某个更高优先级的 content-box 规则覆盖了。