响应式页面小屏出现横向滚动条主因是box-sizing默认content-box导致“隐性溢出”：width:100%+padding+border超父容器；应全局重置*{box-sizing:border-box}，并针对性设置overflow-x于具体容器而非body。
为什么响应式页面总在小屏幕上出现横向滚动条
多数情况不是因为内容太宽，而是 box-sizing 默认值导致的“隐性溢出”：当元素设置了 padding 或 border，又用 width: 100% 布局时，实际占用宽度 = 100% + padding + border，超出父容器，触发横向滚动条。
必须设置 box-sizing: border-box 的地方
全局重置最稳妥，避免漏掉嵌套组件：
* {
box-sizing: border-box;
}
关键点：
- 只对
html或body设置不够，子元素仍可能回退到content-box - 第三方 UI 库（如 Bootstrap、Element Plus）内部样式可能覆盖该规则，需检查其 CSS 优先级
- 某些内联 SVG 或
canvas元素默认不继承box-sizing，需单独声明
overflow-x: hidden 不能乱加
直接在 body 或 html 上写 overflow-x: hidden 是掩耳盗铃：
- 会隐藏真正的布局问题，比如被截断的下拉菜单、弹窗、tooltip
- 影响屏幕阅读器对溢出内容的感知，损害可访问性
- 在 iOS Safari 中，可能意外禁用弹性滚动（rubber-band effect），让页面显得“卡住”
真正该加的地方是具体容器，例如：
.card-list {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
这样既允许水平滑动查看长列表，又不会破坏整体布局流。
检查横向滚动条的三个真实线索
别只盯着 width，这些更常被忽略：
-
margin：负 margin 拉伸后未配对收回，或父容器margin: 0 -8px但子项没约束 -
white-space: nowrap：文本强制不换行，尤其在table或inline-flex容器中 - 伪元素溢出：
::before/::after设置了大尺寸content且未设width或max-width
调试时，在浏览器开发者工具中临时给 body 加 outline: 1px solid red，能一眼看出是否真有内容撑出视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
