水平滚动条是盒模型失控的信号：content-box 默认、子元素宽度未约束、overflow仅隐藏不修正三者叠加所致；须全局设*{box-sizing:border-box}，图片等媒体元素加max-width:100%，flex子项设min-width:0，文本加word-break:break-word。
水平滚动条不是“突然出现”的，而是盒模型尺寸计算失控的明确信号——content-box 默认行为、未约束的子元素宽度、以及 overflow 仅隐藏不修正，三者叠加就必然触发。
box-sizing: border-box 必须全局启用
默认 content-box 下，给一个 width: 100% 的容器加 padding: 16px，实际占用宽度就是 100% + 32px，直接撑破父容器。这不是 bug，是规范行为。
- 在根级或重置样式中统一写：
* { box-sizing: border-box; } - 避免局部覆盖：个别组件若需
content-box（极少见），必须显式重置，不能依赖默认 - 注意伪元素（如
::before）也会继承该设置，若其内容超宽，一样会溢出
图片/媒体元素必须设 max-width: 100%
一张原始宽度 1200px 的图放在 width: 100% 的卡片里，不管父容器多窄，它都坚持 1200px —— overflow-x: hidden 只裁剪显示区域，不改变布局宽度。
- 通用规则：
img, video, iframe, svg { max-width: 100%; height: auto; } - 对
<pre class="brush:php;toolbar:false;"></pre>块，加overflow-x: auto或white-space: pre-wrap，别让它硬撑 - 第三方组件（如地图、图表库）常自带固定宽高，需额外包裹一层并设
max-width: 100%
flex 容器里子项要允许压缩
Flex 子项默认 flex-shrink: 1，但一旦设了 min-width、width 或内联 white-space: nowrap，它就锁死不缩，横向滚动条立刻现身。
- 关键修复：
.flex-item { min-width: 0; }（或flex-shrink: 1显式声明） - 文本类子项加
word-break: break-word或overflow-wrap: break-word，防长 token 撑宽 - 慎用
white-space: nowrap：它会让整行文本拒绝折断，哪怕父容器只有 100px 宽
overflow-x: hidden 不等于问题消失
只在 body 上写 overflow-x: hidden 是掩耳盗铃。滚动条被藏起来了，但页面实际宽度仍超出视口，JS 获取 document.body.scrollWidth 还是大于 window.innerWidth，影响 resize 判断、动画定位甚至 SSR 渲染一致性。
- 真正要检查的是：所有直接子元素是否都满足
width - 用浏览器 DevTools 的“Layout Shift Regions”或手动
getBoundingClientRect()测量可疑元素 - 移动端尤其要注意：viewport meta 标签漏写或
initial-scale设错，会导致整个页面被放大后横向溢出
最易被忽略的点是：盒模型问题从来不是单点故障，而是链式反应——一张没设 max-width 的图 → 父容器被撑宽 → flex 布局失衡 → 整体 scrollWidth 超出 → overflow-x: hidden 只盖住了症状，没动病灶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
