box-sizing: border-box 是性能前提，它锁定宽高、避免隐式变宽导致的重排；组件内用 padding、组件间用 margin；装饰性边框优先用 outline 或 box-shadow。
优化CSS盒模型本身不会直接提升渲染性能，但错误的盒模型使用会引发重排（reflow）和重绘（repaint），间接拖慢页面。真正有效的优化，是让尺寸计算可预测、减少布局抖动、避免意外溢出——核心手段就是统一用 box-sizing: border-box，并严格分离 padding、margin、border 的职责。
为什么 box-sizing: border-box 是性能前提
默认的 content-box 模式下，给一个 width: 300px 的元素加 padding: 20px 和 border: 2px，实际宽度变成 344px。这种“隐式变宽”极易导致父容器溢出、Flex/Grid 列换行、媒体查询断点失效——浏览器不得不反复计算布局，触发多次重排。
border-box 把宽度/高度锁定为开发者声明的值，内容区自动收缩。这不仅让 CSS 更易读，更关键的是：浏览器在解析样式时就能确定最终尺寸，跳过大量运行时校正。
- 全局设置
* { box-sizing: border-box; }是最稳妥的做法，无需为每个组件单独声明 - 例外情况（如需要精确控制内容区尺寸的图标容器）才用
box-sizing: content-box - 注意：某些第三方库（如旧版 Bootstrap）可能已覆盖该规则，需检查计算后的样式
padding 和 margin 混用导致的重排陷阱
把 margin 用在组件内部、或把 padding 用在组件之间，是常见误用。比如在一个卡片内部，用 margin-bottom 分隔标题和正文，会导致卡片高度不可控——因为 margin 可能与相邻元素发生外边距合并（margin collapse），实际间距变成不可预测的值，浏览器必须在布局阶段动态判断，增加计算负担。
立即学习“前端免费学习笔记（深入）”；
- 组件内部间距一律用
padding：它属于元素自身，不参与外部合并，尺寸稳定 - 组件之间间距一律用
margin：它是元素间的隔离带，配合 BFC（如overflow: hidden）可彻底规避 margin collapse - 避免在 Flex/Grid 容器内对子项同时使用
margin和gap，gap更高效且无合并问题
border 的隐形开销与替代方案
border 看似轻量，但当它被用于视觉分隔（比如列表项之间的下边框）时，若未配合 box-sizing: border-box，就可能让元素总高度超出预期；更隐蔽的问题是：border 会参与 layout，而 outline 或 box-shadow 不会。
- 纯装饰性边框（如焦点状态、选中态）优先用
outline或box-shadow，它们不占布局空间，不触发重排 - 需要真实边界的场景（如表单输入框），确保其
border-width已计入width计算（即依赖border-box） - 避免用
border实现几何图形（如三角形），CSS clip-path 或 SVG 更可控、性能更好
最容易被忽略的一点：盒模型优化不是写完就完的事。当你在响应式断点里修改 padding 或 margin 时，要同步检查 border-width 是否仍适配新尺寸——否则一个像素的错位，就可能让整行 Flex 项目重新折行，引发批量重排。
