统一使用 border-box 可确保响应式布局稳定可控：它使声明的尺寸包含 padding 和 border，避免 content-box 下宽度溢出、多列错位及媒体查询偏差，是 Flex/Grid 布局一致性的前提。

盒模型直接影响响应式布局的稳定性与可预测性。默认的 content-box 会让 padding 和 border 额外“撑开”元素，导致百分比宽度失效、多列溢出、移动端横向滚动等常见问题；而统一使用 border-box 能让声明的尺寸真正代表元素整体占位，大幅降低响应式适配难度。

box-sizing 决定尺寸是否“可控”

响应式布局依赖精确的尺寸关系——比如两个 width: 50% 的盒子并排，或一个 max-width: 100% 的图片容器。若用默认 content-box：

• 加 padding: 1rem 后，实际宽度 = 50% + 左右内边距，超出父容器
• 设 border: 2px 会进一步扩大总宽，小屏下极易触发横向滚动条
• 媒体查询中调整 padding 或 border 时，需反复重算 width，维护成本高

换成 box-sizing: border-box 后，所有尺寸声明都包含 padding 和 border，逻辑回归直觉：写多少，就占多少。

相对单位 + border-box = 真正的弹性

仅用百分比、rem、vw 等相对单位还不够，必须配合 border-box 才能发挥效果：

• width: 100%; padding: 1.5rem; 在 border-box 下始终贴满父容器，内容区自动收缩
• font-size: 1rem; 配合 padding: 1rem;，缩放根字体时，内外空间同步缩放，比例不变
• width: 50vw; border: 1px; 不再担心 1px 边框在高清屏上“偷走”布局精度

现代布局（Flex/Grid）依赖盒模型一致性

Flex 项目和 Grid 单元格的分配逻辑，是基于它们的“最终渲染尺寸”。如果子项有的用 content-box、有的用 border-box：

• 同一行中，padding 大的项可能因总宽超标而换行，破坏等分布局
• Grid 的 fr 单位分配剩余空间时，各单元格实际占位不一致，留白错乱
• Flex 容器的 gap 虽可替代 margin，但若子项自身 padding/border 计算混乱，仍会导致对齐偏移

全局设置 * { box-sizing: border-box; } 是保障 Flex/Grid 行为可预期的前提。

避免响应式断点中的隐性偏差

媒体查询常根据视口切换 padding、font-size 或 layout 模式。这些调整若叠加在 content-box 上，容易引发连锁偏差：

• 小屏下调小 padding，但 width 仍按旧逻辑计算，内容区域反而被压缩过度
• 大屏启用 display: grid，却因某些组件保留 content-box 导致网格轨道错位
• 第三方 UI 库未重置 box-sizing，引入后局部布局突变，排查困难

从项目初始化就锁定 border-box，等于为所有后续响应式调整打下统一基准。

不复杂但容易忽略细节。