根本原因是浏览器默认 box-sizing: content-box，导致 width: 100% 不包含 padding 和 border；修复方法是设置 box-sizing: border-box，并在 flex 布局中补充 min-width: 0 防止替换元素抗拒收缩。
为什么 width: 100% 的 input 还是会溢出父容器
根本原因不是写错了 CSS，而是浏览器默认用 box-sizing: content-box 计算尺寸。这时 width: 100% 只管内容区（content），而 input 自带的 padding（如 4px 8px）和 border（如 1px solid #ccc）会额外加在 100% 之外——实际宽度 = 父容器宽 + 左右 padding + 左右 border。
直接有效的修复：给 input 加 box-sizing: border-box
这能让 width: 100% 真正代表“从左 border 到右 border”的总宽度，padding 和 border 都往里缩，不再外扩。
实操建议：
- 现代项目中，直接写
box-sizing: border-box即可，所有主流浏览器（Chrome/Firefox/Safari/Edge）从 IE8 起都原生支持，无需前缀 - 若需兼容极老环境（如 IE7），才需补全：
-webkit-box-sizing: border-box、-moz-box-sizing: border-box - 不要只设
padding: 0; border: none—— 这虽能“压住”溢出，但破坏了可访问性（焦点状态不可见）、UI 一致性，也违背设计意图
更省心的做法：全局重置 box-sizing
避免每个 input、textarea、button 都单独写一遍 box-sizing，推荐在 CSS 入口处统一声明：
*, *::before, *::after {
box-sizing: border-box;
}
注意点：
- 必须包含
*::before和*::after—— 它们常被用于清除浮动、伪元素装饰，漏掉会导致这些伪元素仍按content-box计算，悄悄撑开布局 -
html或body上设box-sizing没用，它不继承给子元素 - 这个规则不影响
margin，外边距依然在盒模型外部，行为不变
Flex 布局下 input 撑破父容器的特殊情况
当父容器是 display: flex，且 input 设了 flex: 1，有时即使加了 box-sizing: border-box 仍会溢出。这是因为 input 是替换元素，默认 min-width: auto，会抗拒收缩。
解决方法很简单：
- 给
input显式加min-width: 0 - 或配合
flex: 1写成flex: 1 1 0（即flex-basis: 0） - 单独设
width: 0也能触发收缩，但语义不如min-width: 0清晰
这类问题容易被忽略——因为 box-sizing 解决的是“尺寸计算逻辑”，而 min-width 控制的是“是否允许压缩”，两者要一起配着用才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
