box-sizing: border-box 是响应式布局尺寸计算成立的前提，它确保 width、flex、grid 等相对单位包含 padding 和 border，避免因 content-box 导致的换行、错位与缩放偏差，需全局重置并覆盖伪元素。
box-sizing: border-box 是响应式布局的尺寸锚点
它不是“重要”，而是**响应式尺寸计算能成立的前提**。没有它，width: 100%、flex: 1、grid-column: 1fr 这些核心响应式单位都会在 padding 或 border 加入后悄悄失效。
- 现象：两个
width: 50%的卡片并排，加了padding: 1rem后第二张换行——因为实际总宽 = 50% + 2rem + 50% + 2rem > 100% - 原因：默认
box-sizing: content-box下，width只管内容区，padding 和 border 是“额外长出来的” - 解决：全局设
*, *::before, *::after { box-sizing: border-box; }，从此width: 50%就真占一半，含内边距和边框
媒体查询中改 padding 时，content-box 会引发连锁计算偏差
你调小移动端的 padding，本意是腾出空间，但若没统一 box-sizing，可能反而让内容区被压缩得更厉害——因为 width 没变，而 padding 缩小后，浏览器仍按 content-box 把“省下的空间”全塞给内容区，导致文字挤在一起。
- 错误做法：
@media (max-width: 480px) { .card { padding: 0.5rem; } }（未锁定盒模型） - 正确前提：先确保所有元素已用
border-box，此时改padding只影响留白，不扰动内容区比例 - 兼容性无顾虑：
box-sizing自 IE8 起就支持，现代项目可放心全局启用
Flex/Grid 布局依赖“最终渲染尺寸”一致，而 content-box 破坏这个一致性
Flex 容器分配空间、Grid 划分轨道，都基于子项的“最终占位宽度”。如果部分子项是 content-box（比如引入的第三方组件），另一些是 border-box，它们的实际宽度逻辑就分裂了——哪怕声明都是 width: 200px，一个真占 200px，另一个占 200px + padding + border，网格立刻错位。
- 典型症状：Grid 中三列等宽，中间列莫名窄一像素；Flex 项目在 Safari 下换行，Chrome 下正常
- 根治方式：项目初始化第一行 CSS 就写
* { box-sizing: border-box; }，把所有元素拉到同一计算基准上 - 注意：第三方库（如 Bootstrap 5+、Ant Design）通常已重置，但老版本或自定义组件仍需手动检查
相对单位（% / rem / vw）必须搭配 border-box 才真正“弹性”
width: 100% 不等于“贴满父容器”，padding: 1.5rem 也不等于“内外留白同步缩放”——除非 box-sizing 统一为 border-box。
立即学习“前端免费学习笔记（深入）”；
- 对比：
width: 50vw; padding: 1rem; border: 1px在content-box下，高清屏上 1px 边框可能让总宽超出预期；在border-box下，1px 被吸收到 50vw 内部，内容区自动收缩，精度可控 - rem 场景：
font-size: 1rem; padding: 1rem;缩放根字体时，只有border-box能保证 padding 和文字同比例变化，否则留白会“漂移” - 一句话：相对单位管“比例”，
border-box管“落地”，二者缺一不可
最容易被忽略的，不是要不要加 box-sizing，而是忘记它对 ::before 和 ::after 伪元素也生效——这些常被用来做装饰、遮罩或三角形，一旦它们没继承 border-box，在响应式断点里就可能突然撑破容器。所以务必用 *::before, *::after 一起重置。
