<p>box-sizing: border-box 是响应式布局默认选择，因其使 width: 100% 真实占满父容器，避免 padding/border 导致溢出；content-box 易引发横向滚动、flex/grid 分配异常等问题，全局重置为 * { box-sizing: border-box; } 最可靠。</p>
box-sizing: border-box 为什么是响应式布局的默认选择
绝大多数现代响应式项目都把 box-sizing 设为 border-box，不是因为“更先进”，而是它让宽度计算符合直觉：你声明 width: 100%，元素就真占满父容器，不会因 padding 或 border 溢出。而 content-box（浏览器默认）会让 width 只管内容区，加上内边距和边框后实际尺寸变大，在流式布局中极易触发横向滚动或错位。
flex / grid 布局中 box-sizing 不一致的典型表现
当父容器用 display: flex 或 display: grid，子项却保留 box-sizing: content-box，尤其在设置 flex: 1 或 grid-template-columns: 1fr 时，子项的 padding 会额外撑开空间，导致等分失效、间隙异常或换行错乱。
- 常见错误现象：
flex: 1的两个子项宽度不均，或右侧出现隐藏滚动条 - 调试线索：检查元素 computed styles 中的
width和border-box width是否一致 - 修复方式：全局重置比局部覆盖更可靠，推荐在根选择器写
* { box-sizing: border-box; }
第三方组件库与自定义样式冲突时怎么处理
像 Bootstrap、Element Plus 这类库通常已设 box-sizing: border-box，但若项目中混用老代码或未重置的第三方 UI 片段，可能局部回退到 content-box。此时直接在组件内部覆盖容易遗漏，且破坏封装性。
- 优先在 CSS 入口统一加
*, *::before, *::after { box-sizing: border-box; } - 避免对特定 class 单独设
box-sizing，除非明确知道该组件依赖content-box计算（极少见） - 注意
iframe、canvas等替换元素不受*影响，需单独确认其包裹容器的盒模型
box-sizing 切换时 padding 和 border 的视觉偏移问题
从 content-box 改为 border-box 时，如果原有样式同时设置了 width 和 padding，元素视觉尺寸会突然缩小——因为原来 width 是内容宽，现在变成含内边距的总宽。这不是 bug，是预期行为，但常被误认为“样式崩了”。
立即学习“前端免费学习笔记（深入）”；
- 迁移时需同步调整：若原
width: 200px; padding: 10px;，改用border-box后想保持外观，应改为width: 220px; padding: 10px; - 使用 CSS 自定义属性可缓解维护压力，例如：
--base-width: 200px;+width: calc(var(--base-width) + 2 * 10px); - 媒体查询中切换
box-sizing极其危险，几乎必然引发重排抖动，应绝对避免
真正需要纠结 box-sizing 的场景极少；多数问题根源其实是没做全局重置，或者在 flex/grid 容器里混用了不同盒模型的子项。一旦统一，后续开发反而不用再想它。
