最常见的原因是 padding 被加在 width: 100% 之外，因默认 box-sizing: content-box 导致总宽度 = width + padding + border；修复方法是设 box-sizing: border-box 或全局重置 * { box-sizing: border-box; }。
设置 width: 100% 却溢出，最常见的原因就是 padding（内边距）被加在了 100% 宽度之外——这源于 CSS 默认的 box-sizing: content-box 盒模型。
理解默认盒模型：width 不包含 padding 和 border
在 content-box 模式下：
元素总宽度 = width + left padding + right padding + left border + right border
所以即使你写了 width: 100%，只要存在 padding 或 border，实际占用空间就会超过父容器宽度，导致水平溢出（尤其在响应式布局或 flex 容器中容易触发滚动条或错位）。
快速修复：改用 border-box 盒模型
这是最直接、推荐的解决方案：
- 给目标元素（或全局重置）加上：
box-sizing: border-box; - 此时
width: 100%表示「包含 padding 和 border 在内的总宽度」，不会溢出 - 建议在项目开头统一设置：
* { box-sizing: border-box; }（含伪元素可加::before, ::after）
检查是否意外继承了 padding 或 margin
即使你自己没写 padding，也要排查：
- 父元素是否有
padding？子元素width: 100%是相对于父内容区计算的，但若父有 padding，子元素可能撑到父边框外（尤其当父设了overflow: hidden时更易发现） - 浏览器默认样式（如
<input>、<button></button>、<textarea></textarea>常自带 padding） - CSS 框架（如 Bootstrap）可能全局设置了 padding，需查看 computed 样式确认
其他常见诱因（顺手排查）
除了 padding，这些也常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
margin：虽然不影响 width 计算，但负 margin 或外边距合并可能导致视觉溢出 -
white-space: nowrap+ 长文本：强制不换行会突破容器宽度 - Flex 子项未设
flex-shrink: 0：在空间不足时仍可能被压缩后因 padding 显得“挤出” - 图片或子元素本身宽度过大（如
img { width: auto; max-width: none; }）
