body默认margin: 8px是水平滚动条最常见元凶，左右共16px导致100vw超宽；需先设body{margin:0;padding:0}验证，再检查定位偏移、图片/pre/第三方组件等隐性溢出源，并全局启用box-sizing:border-box。
body 默认 margin 是最常见元凶
Chrome、Safari、Firefox 都给 body 设了 margin: 8px，左右各 8px —— 这 16px 就是水平滚动条的“隐形起点”。缩放时它被放大，更容易触发溢出。不是你代码写错了，是浏览器默认就留了缝。
快速验证：在控制台执行 document.body.scrollWidth > window.innerWidth，返回 true 就确认存在真实溢出；再临时加 body { margin: 0; padding: 0; }，滚动条立刻消失，基本可锁定问题。
- 别用
overflow-x: hidden掩盖，它不解决溢出，只藏滚动条 -
padding: 0必须同步加，否则padding也会撑宽 - 这条规则要放在所有 CSS 最顶部，确保全局生效
定位元素的 left/top 偏移会悄悄撑宽容器
position: relative 本身不脱离文档流，但 left: 80px 或 inset-inline-start: 100px 会让元素右边缘超出父容器边界，浏览器仍把它计入布局宽度 —— 即使视觉上只看到一半，水平滚动条照样出现。
检查方式：选中该元素 → Elements 面板 → Styles 标签页 → 点开 :hover 或直接看 Computed 值里的 left、right 实际像素值，是否为负数或远超父容器宽度。
立即学习“前端免费学习笔记（深入）”；
-
inset类属性（如inset-block-end: -20px）极易导致底部溢出，尤其在height: auto的父容器里 - 避免硬写死偏移值，改用
calc(50% - 20px)或clamp(0px, 5vh, 40px)设安全边界 - 对全屏覆盖层，优先用
inset: env(safe-area-inset-top) ...替代inset: 0
图片、pre、第三方组件这些“安静的溢出源”
它们不报错、不警告，但只要没约束，就是滚动条的稳定供应者：
-
<img alt="为什么移动端浏览器会出现水平滚动条及如何快速定位错误CSS？" >没加max-width: 100%; height: auto，原始尺寸直接突破容器 -
<pre class="brush:php;toolbar:false;"></pre>或<code>块没设overflow-x: auto或white-space: pre-wrap，长行必然溢出 - 地图、图表库内部用了
position: absolute+ 固定像素宽，脱离文档流后不受max-width控制 -
white-space: nowrap的文本块，哪怕只是几个单词，也能撑爆整行
排查技巧：逐个给可疑子元素加 display: none !important，滚动条消失时，上一个被隐藏的元素就是罪魁祸首。
box-sizing: border-box 缺失会让 width 计算失真
默认 box-sizing: content-box 下，width: 100% 只管内容区，padding 和 border 额外叠加 —— 一个 padding: 16px 的容器，实际总宽就是 100% + 32px，必然溢出。
修复很简单：全局加一条 * { box-sizing: border-box; }，然后确保所有响应式容器（尤其是 flex/grid 子项）显式声明 box-sizing: border-box。
- 别依赖重置库，手动加更可控；
*选择器性能影响可忽略 - 特别注意第三方组件的根容器，常自带
box-sizing: content-box，需单独覆盖 - 搭配
overflow: hidden给关键容器（如.item），双重保险截断动画位移等意外溢出
真正卡住人的，从来不是某一行 CSS 写错了，而是多个“看起来无害”的设置叠加后，在缩放、滚动、不同设备下才暴露出来。定位时别盯着 max-width 看，先查 body 边距、再扫定位偏移、最后揪出那些没设约束的替换元素 —— 顺序错了，花半天也找不到根。
