box-sizing: border-box 是响应式布局的默认起点，因其避免百分比宽度与 padding/border 组合导致的溢出；在 flex/grid 中 content-box 会额外挤占空间，引发布局异常；全局重置推荐 * { box-sizing: border-box; } 并覆盖伪元素；切换时需用 calc() 补回尺寸或改用弹性单位。
box-sizing: border-box 是响应式布局的默认起点
几乎所有现代响应式框架（如 Bootstrap、Tailwind）都默认将 box-sizing 设为 border-box，不是因为“更好看”，而是因为 content-box 在百分比宽度 + padding/border 组合下必然导致溢出。比如设一个 width: 100% 的容器，再加 padding: 16px，它实际宽度就变成 100% + 32px——这在移动端窄屏上直接触发横向滚动条。
为什么 content-box 在 flex/grid 中更难调试
当使用 flex: 1 或 grid-template-columns: 1fr 2fr 时，浏览器按剩余可用空间分配尺寸，但若子项是 content-box，它的 padding 和 border 会额外挤占空间，导致实际内容区被压缩、文字换行异常、图标错位。这种问题不会报错，只表现为“看起来有点不对劲”，排查时容易绕远路去查 flex 属性或媒体查询。
- 所有参与 flex/grid 分配的元素，建议统一用
box-sizing: border-box - 全局重置推荐写法：
* { box-sizing: border-box; }，但注意它不继承，需确保伪元素也覆盖：*::before, *::after { box-sizing: border-box; } - 某些第三方组件（如旧版 Select2、某些日期控件）会显式设回
content-box，需单独覆盖
box-sizing 切换时的常见视觉断裂点
从 content-box 改成 border-box 后，若未同步调整 width 值，元素会突然变小——因为原来设的 width: 200px 在 border-box 下变成了“内容区 + padding + border = 200px”。这是重构老项目时最常遇到的 UI 偏移来源。
- 安全迁移方式：先保留原
width，用calc()补回 padding/border，例如原width: 200px; padding: 10px; border: 1px solid #ccc;→ 改为width: calc(200px + 20px + 2px); box-sizing: border-box; - 更推荐的做法：直接删掉旧
width，改用max-width或弹性单位（rem/%），让尺寸回归流式逻辑 - 不要在同一个元素上混用两种
box-sizing值，尤其避免父容器border-box+ 子元素content-box的组合
媒体查询中 box-sizing 不影响断点计算，但影响断点效果
@media (max-width: 768px) 这类断点只读取视口宽度，和 box-sizing 无关。但如果你在断点内写了 width: 50%; padding: 20px，那么 content-box 下该元素在小屏上更容易撑破容器，而 border-box 能守住 50% 这个预期尺寸。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：某些 CSS-in-JS 库（如 styled-components）或原子化工具（如 Windi CSS）可能对 box-sizing 的注入顺序不一致，导致局部样式被覆盖。检查渲染后的 computed styles，确认 box-sizing 确实生效，而不是只写在 source 中。
