页面宽度超出屏幕主因是默认 content-box 盒模型使 padding 和 border 额外增加宽度；应全局设 box-sizing: border-box，并配合 max-width、overflow-x: auto 及清除常见撑宽源。
页面宽度超出屏幕，通常是因为元素的 padding 和 border 被额外加在了设定的 width 之外，导致总宽度超过 100%。解决的关键是用 box-sizing: border-box 让 width 包含 padding 和 border。
为什么 width 默认会“撑大”？
CSS 默认使用 content-box 盒模型：当你写 width: 300px; padding: 20px; border: 5px solid #000;，元素实际占用的水平空间是 300 + 20×2 + 5×2 = 350px。多个这样的元素并排或嵌套时，很容易突破容器甚至视口宽度。
用 border-box 统一控制尺寸
给关键容器（比如 body、wrapper、flex item、grid item）加上：
*, *::before, *::after { box-sizing: border-box; }
立即学习“前端免费学习笔记（深入）”；
这样所有元素的 width/height 就始终代表“最外层边界”的尺寸，padding 和 border 向内压缩内容区域，不再意外溢出。
配合 max-width 和 overflow 处理特殊情况
- 对可能产生长内容的块（如代码块、表格、图片），加 max-width: 100% 防止突破父容器
- 若必须保留原始宽高（如图表 canvas），可对父容器设 overflow-x: auto，提供横向滚动
- 避免给 body 或 html 设固定 width，也不要用 width: 100vw（它包含滚动条宽度，反而易出问题）
检查常见“隐形撑宽”来源
- 未重置的 margin（如 ul/ol 默认有左右 margin）
- 浮动元素未清除，导致父容器高度塌陷、布局错乱
- 使用 display: inline-block 的元素间存在空白符（空格/换行），产生约 4px 间隙
- 响应式断点中漏写了 box-sizing，只在桌面端生效，移动端又溢出了
