width: 100% 触发横向滚动条是因为它基于父容器 content box 计算，而 padding、border、margin 或 min-width 会额外增加总宽度；需全局启用 box-sizing: border-box 并对媒体元素设 max-width: 100%。
为什么 width: 100% 还会触发横向滚动条
常见错觉是“只要没写死 px 宽度，就不会溢出”，但实际中 width: 100% 仍可能让容器撑破视口。根本原因是：它基于父容器的 content box 计算，而 padding、border、子元素的 margin 或 min-width 都会额外增加总宽度。比如父元素有 padding: 20px，子元素设 width: 100% 后，实际占用宽度 = 父 content width + 左右 padding，超出视口即触发横向滚动条。
box-sizing: border-box 必须全局启用
这是最基础也最容易被跳过的一步。不设它，所有 padding 和 border 都会“加在” width 外面，响应式布局几乎必然失控。
*, *::before, *::after {
box-sizing: border-box;
}
- 务必放在 CSS 最顶部，否则后续规则可能被覆盖
- 不要只给某个组件加——
border-box要成为默认心智模型 - 注意：IE8+ 支持，无需前缀；但若项目需兼容 IE7，需另作处理（通常已无必要）
用 max-width: 100% 替代 width: 100% 控制图片/媒体
图片、iframe、video 等替换元素默认不响应父容器缩放，即使父级宽度变小，它们仍按原始尺寸渲染，直接撑开布局。
img,
iframe,
video,
embed,
object {
max-width: 100%;
height: auto;
}
-
max-width: 100%是关键：它允许元素在窄屏下收缩，但不会强制拉伸 - 必须配
height: auto，否则等比缩放失效，出现畸变 - 避免对这些元素设
width: 100%—— 它会强制拉伸，破坏清晰度
overflow-x: hidden 是临时止血，不是解决方案
有人习惯在 body 或 html 上加 overflow-x: hidden 来“隐藏”滚动条。这只会掩盖问题：内容被截断、焦点丢失、可访问性下降、打印样式异常。
立即学习“前端免费学习笔记（深入）”；
- 它不能修复真实溢出源，比如未重置的
margin、未约束的white-space: nowrap文本、或第三方组件自带的固定宽度 - 调试时可临时加它辅助定位（比如加完后滚动条消失，说明确实有溢出），但上线前必须删掉
- 真正要查的是：用浏览器开发者工具选中
body→ 查看 “Computed” 面板里的width和overflow，再逐层向上检查哪个子节点的offsetWidth > clientWidth
box-sizing 的卡片、一张没加 max-width 的截图、一段没包裹在 word-break: break-word 里的长 Token。与其事后隐藏，不如把 box-sizing: border-box 当成呼吸一样自然，把 max-width: 100% 当成图片的默认属性。 
