width: 100%会溢出父容器，因默认box-sizing: content-box下width仅指内容区宽，padding、border额外叠加；须用box-sizing: border-box或改用width: auto解决。
width:100% 会溢出父容器，除非用 box-sizing: border-box
设置 width: 100% 时，浏览器只把元素的 content 区域拉到和父元素 content 宽度一致。它完全不管 padding、border、margin —— 这些都会额外加在内容区外面。
常见错误现象：
- 给
width: 100%的元素加了padding: 10px和border: 2px solid，结果横向滚动条出现 - 父容器宽 300px，子元素总宽度变成 300px + 20px + 4px = 324px
- 在 flex 或 grid 容器里嵌套使用时，意外破坏对齐
解决办法只有两个：
- 统一加
* { box-sizing: border-box }，让width: 100%包含 padding 和 border - 或者直接改用
width: auto，更省心
width:auto 是浏览器自动算出来的“安全宽度”
width: auto 不是“随便设”，而是严格遵守盒模型公式：父元素 content width = 子元素 width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
这意味着：
- 你加
padding: 15px，它就自动把width减去 30px - 你加
margin: 0 20px，它再减去 40px - 哪怕你什么都没设，它也默认填满父容器（块级元素行为）
注意：这个计算只发生在块级元素上；内联元素的 width: auto 就是内容宽度，不会撑开。
IE6 下 width:100% 表现异常，width:auto 更可靠
老项目还在兼容 IE6？那必须避开 width: 100%。
原因：
- IE6 对
width: 100%的解析不一致，尤其在浮动或绝对定位上下文中容易截断内容 - IE6 下
width: auto行为稳定，且能正确响应父容器变化 - 树形控件、菜单栏等动态宽度结构，用
auto能避免节点文字被裁切
现代项目虽不用考虑 IE6，但这个历史教训说明：width: 100% 的语义是“强制对齐父 content 区”，不是“安全填满”。它天生带风险。
什么时候非用 width:100% 不可？
极少，但有真实场景：
- 需要子元素和父元素的
content区域像素级对齐（比如 canvas、video、iframe 等替换元素） - 配合
position: absolute做全宽覆盖层，且父容器已设box-sizing: border-box - 某些 CSS-in-JS 库生成的 inline style 强制写死
width: 100%，此时只能靠重置box-sizing补救
绝大多数布局中，width: auto 是默认、安全、可预测的选择；而 width: 100% 是一个需要明确理由才启用的“手动干预”动作。
真正容易被忽略的点是：即使父容器用了 box-sizing: border-box，子元素若设 width: 100% 仍会忽略自身的 margin —— 那部分永远溢出。这点连很多资深前端都踩过坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
