padding导致移动端横向溢出的根本原因是box-sizing: content-box下width仅含内容区，padding额外叠加；修复需全局设置 , ::before, *::after { box-sizing: border-box; }，并配合响应式分层控制padding及检查overflow作用对象。
为什么 padding 会让容器在移动端横向溢出
不是 padding 写错了，而是它叠加在 width: 100% 之外——浏览器默认用 box-sizing: content-box，此时 width 只算内容区，左右 padding 额外加在两边。比如父容器宽 375px（iPhone SE 屏宽），子元素设 width: 100%; padding: 16px;，实际占宽就是 375px + 32px = 407px，必然触发 overflow-x: scroll 或内容被裁剪。
必须加 box-sizing: border-box，且要覆盖伪元素
这是最直接有效的修复，但只写 * { box-sizing: border-box; } 不够：
-
*::before和*::after伪元素默认仍用content-box，必须显式包含 - 推荐写法：
* , *::before, *::after { box-sizing: border-box; } - 老项目不敢全局改？优先加在高频出问题的元素上：
input、textarea、.card-content、.panel-item - 微信 X5 内核（v3.7 以下）对伪元素重置支持不稳定，可兜底加一句：
html { box-sizing: border-box; }
移动端小屏下 padding 还是溢出？别硬调数值，分层响应
单纯把 padding: 24px 改成 padding: 8px 很危险——桌面端会太紧凑，且无法适配中屏设备。正确做法是用媒体查询分档控制：
- 手机（≤480px）：
@media (max-width: 480px) { .card { padding: 12px 16px; } } - 重点：右侧或底部 padding 更容易导致溢出，可单独收紧：
padding-right: 8px - 避免用
calc(100% - 32px)配合padding——父容器若有border或padding，基准就乱了；box-sizing: border-box+width: 100%更稳 - 长文本卡片慎用左右大
padding，改用max-width: 600px; margin: 0 auto;控制可读宽度
检查 overflow-x: hidden 为什么不起作用
写了 overflow-x: hidden 却仍能看到滚动条，大概率是因为：
- 该样式没加在**直接父容器**上——比如
#panels-container里有子元素撑宽，但overflow-x: hidden却写在更外层的#app - 父容器本身有
padding，而子元素width: 100%是按父内容区算的，结果撑到父边框外，overflow-x: hidden对这个“外部溢出”无效 - Flex/Grid 容器中子项未设
min-width: 0，导致即使有box-sizing: border-box，flex 项也不收缩，依然溢出 - 务必进 DevTools 的「Computed」面板确认目标元素的
box-sizing确实是border-box，而不是被更高优先级规则覆盖
真正容易被忽略的是：溢出未必来自 padding 本身，而是它和 width、flex、grid、甚至 transform 共同作用的结果。先锁定具体哪个元素撑开了，再判断该动 box-sizing、调 media query，还是改布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
