width: 100% 溢出父容器的根本原因是默认 box-sizing: content-box，导致总宽=width+padding+border；需用 box-sizing: border-box 统一语义，并配合 min-width: 0（flex/grid）、max-width: 100%（图片/iframe）等协同解决。
设置 width: 100% 却溢出父容器，不是写错了，而是浏览器默认按 box-sizing: content-box 计算尺寸——此时 width 只管内容区，padding 和 border 会额外加在它外面，总宽度自然超出去。
为什么 width: 100% 不等于“填满父容器总宽”
默认盒模型下，元素总宽度 = width + 左右 padding + 左右 border。哪怕父容器宽 300px、子元素写 width: 100%，只要它自己有 padding: 12px 和 border: 1px，实际占宽就是 300px + 24px + 2px = 326px。
更隐蔽的是：父容器若有 padding（比如 padding: 0 20px），它的 content 区只有 260px，子元素 width: 100% 就只占这 260px；再叠加上自己的 padding，就又超了。
- 开发者工具里看「Computed」面板，确认
box-sizing真是border-box，别信代码里写了就生效 - 框架（如 Bootstrap）或重置样式可能覆盖了你的设置，得查 computed 值
-
input、textarea等表单元素自带padding，不显式重置的话，width: 100%几乎必溢出
用 box-sizing: border-box 强制修正的实操方式
加了 box-sizing: border-box 后，width: 100% 就真指“整个边框盒的宽度”，padding 和 border 全被包进去，内容区自动收缩。
- 全局最省事：
* { box-sizing: border-box; }，但老项目慎用，可能影响某些依赖content-box的旧布局 - 精准控制：只给出问题的组件加，比如
.form-control { width: 100%; padding: 8px 12px; box-sizing: border-box; } - 伪元素也要覆盖：
*::before, *::after { box-sizing: border-box; }，否则 :before 插入的内容可能意外溢出
flex 或 grid 容器里还用管 box-sizing 吗
要管。flex item 默认会收缩，但一旦你设了 min-width: auto（这是 img、input 的默认值）或显式 width: 100%，且父容器没设 overflow: hidden，padding 仍会导致横向滚动条或视觉错位。
- flex 子项必须配
min-width: 0，否则box-sizing也救不了它被撑开 - grid 子项同理，尤其用了
grid-template-columns: 1fr时，min-width: 0是刚需 - 即使用了 flex/grid，父容器若设了
padding，子元素width: 100%仍只对 content 区生效——所以还是得靠box-sizing: border-box统一语义
图片、iframe 等替换元素的特殊处理
img 和 iframe 是替换元素，默认不响应 width: 100%，光靠 box-sizing 不够。
- 图片必须加
max-width: 100%+height: auto+display: block，三者缺一不可 - 浮动图片还要触发 BFC（比如父容器加
overflow: hidden或display: flow-root），否则max-width计算的包含块可能不是你想要的父级 - iframe 需额外加
width: 100%，且确保其父容器有明确宽度（不能是width: fit-content）
真正卡点不在要不要加 box-sizing，而在于是否意识到：溢出从来不是单一属性的问题，它是 width、padding、border、min-width、包含块层级和替换元素特性共同作用的结果。少盯一个 computed 值，就可能白调半小时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
