根本原因是css默认盒模型（content-box）下width:100%仅指父元素content区宽度，不含padding/border；子元素自身padding、border或margin会叠加导致溢出。解决方案首选box-sizing:border-box，使width包含内边距和边框。
元素设了 width: 100% 却撑出父容器，根本原因不在“写错了”，而在没看清 CSS 盒模型怎么算尺寸——尤其是 padding 和 box-sizing 的配合关系。
默认盒模型下，100%只算内容区
标准 box-sizing: content-box（浏览器默认）时，width: 100% 指的是“占满父元素的 content 区宽度”，不包含父级的 padding 和 border。如果父元素有左右 padding: 20px，那它的 content 宽度 = 父总宽 − 40px；子元素设 width: 100%，实际就只占这减去 padding 后的宽度。但若子元素自己再加 padding 或 border，总宽就会超出去。
- 父容器：
width: 300px; padding: 0 20px;→ content 宽 = 260px - 子元素：
width: 100%; padding: 10px;→ 内容宽 260px + 左右 padding 20px = 280px → 还没超 - 但若子元素还加了
border: 2px solid;→ 总宽 = 260px + 20px + 4px = 284px → 仍小于 300px，看似安全 - 一旦子元素用
margin，比如margin: 0 10px;，总宽就变成 260px + 20px + 4px + 20px = 304px → 超出父级
用 border-box 让宽高包含内边距
box-sizing: border-box 是最常用、最直接的解法。它让元素的 width 和 height 指的是“整个边框盒”的尺寸，即把 padding 和 border 都算进设定值里，内容区自动收缩。
- 给子元素加：
box-sizing: border-box; - 这样
width: 100%就真等于“占满父元素总宽”，哪怕父有 padding，子有 padding/border，也不会溢出 - 建议全局重置：
* { box-sizing: border-box; }，一劳永逸
父有 padding 时，子别硬写 100%
当父元素设置了 padding（比如 padding: 20px 30px;），而子元素又必须视觉上“顶到父级边缘”，此时设 width: 100% 反而会留白或溢出——因为 100% 对应的是父 content 区，不是总宽。
立即学习“前端免费学习笔记（深入）”；
- 方案一：子元素用
width: inherit;，继承父元素计算后的总宽（含 padding） - 方案二：子元素用
left: 0; right: 0;（需配合position: absolute） - 方案三：用
calc(100% + 60px)手动补偿（60px = 左右 padding 和），但维护性差，慎用
绝对定位子元素的 100% 是按 padding box 算的
这点容易被忽略：当子元素设了 position: absolute，它的 width: 100% 不再参照父的 content 区，而是参照父的 padding box（即父总宽 − 左右 margin，但包含 padding）。所以如果父有 padding: 20px，子 width: 100% 实际会等于父总宽（不含 margin），看起来“刚好贴边”；但若父还有 border，它就不含 border，可能仍有偏差。
- 更稳妥的做法：绝对定位子元素改用
left: 0; right: 0;，直接拉满可用空间 - 或者明确父级设
box-sizing: border-box，再统一理解尺寸基准