box-sizing: border-box 应全局重置或作用于自定义容器而非个别元素，避免子元素仍用content-box导致尺寸失控；padding/margin禁用于占位对齐，优先用Flex/Grid和gap；border宜用outline或box-shadow替代以减少重排。
box-sizing: border-box 要设在最外层容器上
很多开发者把 box-sizing: border-box 只加在个别元素上，结果子元素仍按默认 content-box 计算，导致 padding 和 border 额外撑开尺寸，后续又用负 margin 或 calc() 补救——这反而增加样式计算负担。浏览器每帧都要重新解析盒模型，尤其在动画或滚动中，频繁重排会掉帧。
正确做法是全局重置：
* {
box-sizing: border-box;
}但注意：某些第三方组件（如旧版 Bootstrap、某些 UI 库的表单控件）内部依赖 content-box，直接全局设置可能破坏其尺寸。稳妥方案是：
- 对自定义容器统一加
box-sizing: border-box，不污染全局 - 用 CSS 层叠隔离第三方组件，例如给第三方组件外层加
class="third-party-wrapper"并单独重置其子元素 - 避免在动画元素上动态切换
box-sizing值，该属性无法硬件加速，会强制同步布局
padding / margin 不要用于“占位”或“对齐”
用 padding-top: 20px 模拟标题间距、用 margin-left: auto 实现居中——这些看似方便，实则让布局逻辑和视觉表现耦合过紧。一旦设计调整间距，就得逐个改 padding/margin；更严重的是，当元素有 transform 或 will-change 时，含非零 margin/padding 的块级元素更容易触发 Layout（重排），而非仅 Composite（合成）。
立即学习“前端免费学习笔记（深入）”；
替代方案优先级如下：
- 结构对齐用 Flexbox 或 Grid：比如
display: flex; justify-content: center;替代margin: 0 auto - 垂直间距用
gap：Flex/Grid 容器的gap不触发重排，且可被浏览器优化为 layout-only skip - 必须用内边距时，只在容器级使用，内容子元素保持
margin: 0，减少嵌套层级的盒模型叠加计算
避免嵌套多层 padding 导致尺寸不可控
常见反模式：.card > .content > .text 各层都设 padding: 16px，最终文本离卡片边缘实际是 48px，但开发者只记得“每层 16px”，调试时反复 inspect 才发现叠加效应。这种隐式叠加不仅难维护，还会让 CSS 引擎在每次样式更新时重新计算所有父级盒尺寸。
推荐约束规则：
- 容器 padding 统一由最外层组件声明（如
.card { padding: 16px; }） - 子元素不设 padding，用 margin 控制自身间距（且仅在需要分隔时设，非默认）
- 若需响应式内边距，用
@container查询替代媒体查询 + 多层 padding 重写 - 警惕伪元素（
::before/::after）意外添加 padding，它们同样参与盒模型计算
border-width 影响 layout 性能比想象中高
哪怕只是 border: 1px solid #ccc，也会让元素从“无 border”状态切换时触发完整 layout —— 因为 border 改变会影响 offsetWidth/Height，而这些属性读取会强制同步刷新样式树。在列表滚动或 tab 切换中，大量元素同时加/去边框，极易卡顿。
优化方式很直接：
- 用
outline替代border做焦点或选中态（outline不影响盒模型） - 需要视觉边框但不想触发布局？用
box-shadow: 0 0 0 1px #ccc，它走合成层，不改变元素几何尺寸 - 真要用 border，初始化时就预留空间：比如固定
border: 1px solid transparent，切换时只改color，避免 width 变化
盒模型优化不是抠几像素，而是让浏览器少做一次 layout 决策。padding、margin、border 看似静态，但在现代交互场景下，它们是最常被 JS 动态修改的样式属性之一——每一次修改，都可能成为性能瓶颈的起点。
