根本原因是默认box-sizing: content-box，width仅指内容区，padding和border额外叠加导致总宽超限；需用box-sizing: border-box修正，并全局设置、::before、*::after以确保生效。
padding 为什么会让 div 宽度超限
因为浏览器默认用 box-sizing: content-box，此时 width 只管内容区，padding 和 border 是额外加在它外面的。比如父容器宽 300px，子 div 设了 width: 100%、padding: 12px，实际总宽就是 300px + 24px = 324px —— 超出是必然的，不是写错了，是盒模型在“按规则加法”。
box-sizing: border-box 真的能解决吗
能，但必须确保它真正生效：
-
box-sizing: border-box让width包含padding和border，内容区自动收缩 - 只给父容器或某个 class 加没用，得全局覆盖：
* { box-sizing: border-box; }+*::before, *::after { box-sizing: border-box; } - 某些表单控件（如
input、textarea）在部分浏览器中仍默认content-box，需单独重置：input, textarea { box-sizing: border-box; } - 如果调试时发现
Computed面板里box-sizing是border-box，但内容区宽度没变小，说明该样式没应用到目标元素（比如被更具体的 selector 覆盖了）
为什么加了 padding 还是撑开 flex 容器
Flex 容器本身不“理解” padding 对子项的影响逻辑：
- 子项设
margin-right: 8px，总宽度就多出8px，Flex 不会为此调整分配 - 父容器用了
width: 100vw，加上自身padding就直接超视口；应改用width: 100%并确认其父级有明确 content width - 子项若含
min-width: auto（如图片、button），即使box-sizing正确，也得显式加min-width: 0才能收缩 - 别用
margin做间隙，gap才是 Flex 的原生解法，不参与子项尺寸计算
移动端特别容易踩的坑
窄屏下几像素溢出就会触发横向滚动条，而问题往往藏得深：
- 伪元素（
::before/::after）若没被box-sizing覆盖，可能悄悄撑开布局 -
rem或vw配合padding时，计算链变长，容易失控（例如padding: 1rem在 iPhone SE 上是16px，但父容器 content 区可能只剩300px） - 嵌套
padding：父容器padding: 16px+ 子项padding: 12px→ 累计56px额外开销，比想象中更易超限 - 用 Chrome DevTools 的 “Metrics” 面板看绿色（content）、蓝色（padding）、橙色（border）三者之和，只要标红提示 “overflows container”，就说明有元素突破了父级边界
实际宽度是否溢出，不取决于你写了什么，而取决于浏览器最终怎么算——box-sizing 是开关，但它的作用范围、继承关系、以及和其他属性（如 min-width、gap）的配合，才是决定性因素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
