根本原因是默认box-sizing: content-box，width: 100%只管内容区，padding和border额外叠加导致溢出；必须全局设置, ::before, *::after { box-sizing: border-box; }并置于CSS最顶部。
盒模型计算不准不是响应式本身的问题，而是你没告诉浏览器“宽度到底指哪一层”——width 默认只管 content，而你却在想总宽、留白、对齐。修复核心就一条：统一用 box-sizing: border-box，且必须覆盖所有上下文。
为什么 width: 100% 在媒体查询里突然溢出？
常见现象：PC端好好的，一缩到手机屏就横向滚动条出现，width: 100% 的元素撑破父容器。
- 根本原因是默认
box-sizing: content-box，width: 100%+padding: 16px+border: 1px= 实际占位 > 100% - 媒体查询中改了
padding或加了border，但没同步检查box-sizing是否生效 - 第三方 UI 库（如 Ant Design、Element Plus）常重置
box-sizing，覆盖你写的全局规则 - 伪元素
::before/::after不继承box-sizing，而清浮动、图标装饰等都靠它们——漏掉就等于没设
正确写法必须是：
*, *::before, *::after {
box-sizing: border-box;
}且这条规则得放在所有 CSS 文件最顶部，早于 Normalize.css、UI 库样式。
立即学习“前端免费学习笔记（深入）”；
calc() 在断点里算错，是不是单位混用问题？
比如 width: calc(100% - 2rem) 在 iPhone Safari 里失效，或 max-width: calc(100vw - 48px) 在某些安卓 WebView 中为 0。
- 不是单位不能混，而是求值时机冲突：
100%依赖父容器宽度，100vw是视口宽度，两者快照不同步，旧引擎（iOS Safari ≤15.3、Android 4.4 WebView）直接丢弃整条声明 - 空格缺失是静默杀手：
calc(100%-2rem)❌，calc(100% - 2rem)✅ - 自定义属性参与运算时，
--gap: 16❌（缺单位），--gap: 16px✅；--offset: 0更危险，必须写成--offset: 0px - 乘除限制严格：
calc(var(--w) * 2)✅，calc(var(--w) * 2px)❌（右侧必须是纯数字）
Flex/Grid 响应式容器里子项错位，是不是 fr 或 gap 没算准？
列宽不均、网格项被挤窄、绝对定位元素跑偏，90% 都和盒模型叠加误差有关。
-
fr单位本身没错，但浏览器先扣gap、padding、border，再分剩余像素；若容器宽度是小数（如799.5px），两个1fr就可能被舍入成399px和400px -
gap不是“视觉间隔”，是刚性占位：三列 +gap: 10px→ 扣掉20px总宽，再分剩余部分 - 子项写了
width: 100%或min-width: 200px，会无视gap预留，强行撑满轨道 - Grid 容器默认
position: static，position: absolute子项会向上找定位上下文，不是“在 Grid 里居中”，而是“在最近 relative 父级里居中”
调试建议：打开 DevTools → Computed → 查看 grid-template-columns 实际解析值，再对比容器 width 是否为整数。
JS 获取响应后宽度，为什么 getComputedStyle 和 getBoundingClientRect 差一堆？
比如你在 @media (max-width: 768px) 里改了 padding，但 JS 读出来的 getComputedStyle(el).width 还是旧值。
-
getComputedStyle(el).width返回的是你写的 CSS 声明值（如"100%"或"calc(100% - 2rem)"），不是渲染结果，也不含padding/border -
el.getBoundingClientRect().width是真实占位宽度，已包含padding、border、DPR 缩放，适合做对齐、动画、尺寸比对 -
el.offsetWidth在 Flex/Grid 场景下可能滞后于真实渲染，尤其动态插入内容后未触发重排 - 第三方组件（React/Vue）内部用 Shadow DOM 或 CSS-in-JS 时，
*全局规则不穿透，getBoundingClientRect()是唯一可信来源
真正容易被忽略的点：响应式不是只改断点里的 CSS，而是整个盒模型链路都要对齐——从 box-sizing 声明顺序、calc() 空格与单位、到 JS 读取时的 API 语义，任何一环断开，计算就失准。
