box-sizing: border-box能确保width: 100%准确计算，因它将padding和border纳入宽度，避免溢出；需全局设置*{box-sizing:border-box}并配合min-width: 0解决flex下替换元素收缩问题。
直接加 box-sizing: border-box，否则 width: 100% 永远算不准 —— 这不是 input 特有 bug，是所有替换元素在 content-box 下的默认行为。
为什么 width: 100% 的 input 还是会撑破父容器
浏览器对 input 默认用 box-sizing: content-box，此时你写的 width: 100% 只管内容区，而它自带的 padding（如 4px 8px）和 border（如 1px solid #ccc）会额外加在 100% 外面。实际宽度 = 父容器宽 + 左右 padding + 左右 border。
常见错误现象包括：横向滚动条意外出现、表单卡片右侧被顶出、移动端横竖屏切换后输入框错位。
- 不要只设
padding: 0或border: none—— 这破坏可访问性（焦点状态不可见），也违背 UI 设计意图 - 别指望父容器加
overflow: hidden来“遮丑”，它不解决尺寸计算问题，只掩盖溢出 - 旧版 Safari（iOS 12 及更早）或 IE 中，
input可能回退为content-box，需单独加固
必须全局声明 box-sizing: border-box，不能只写在 input 上
只给 input 加 box-sizing: border-box 不够 —— 它的父容器、伪元素（如 ::before）、甚至第三方 UI 库的内部子元素，若仍用 content-box，嵌套后照样溢出。
正确做法是把这段规则放在所有其他 CSS 之前（尤其要早于 normalize.css 或 Element UI 等库）：
*, *::before, *::after {
box-sizing: border-box;
}
- 这个写法覆盖所有元素及伪元素，避免盒模型计算混乱
- 如果项目已用
html { box-sizing: border-box; }，请检查是否漏掉了*::before和*::after—— 它们常被用于清除浮动或装饰，一旦没重置，就可能悄悄撑开布局 - IE8+ 原生支持，无需前缀；IE7 及更早不支持，但现代项目基本可忽略
Flex 布局中 input 还是溢出？补上 min-width: 0
即使 box-sizing 正确，input 在 display: flex 容器里仍可能撑破边界 —— 因为它的默认 min-width: auto 会阻止收缩，把自身固有尺寸（含 padding/border）当作底线。
必须对 input 直接父级下的 flex 子项显式设置：
.flex-container > input {
min-width: 0;
}
-
min-width: 0是解锁flex-shrink的前提，漏掉它，flex: 1或flex-shrink: 1都无效 - 如果
input套在另一个 flex 容器里（比如.form-group），那.form-group本身也要加min-width: 0 - 移动端 Safari 对
min-width: auto执行更严格，别依赖 Chrome 的“悄悄妥协”
怎么确认 box-sizing 真正起作用了
不能光看代码写了没，得进开发者工具实测：
- 选中目标
input元素，在「Computed」面板查box-sizing值是否为border-box - 切到「Metrics」面板，悬停在蓝色宽度条上，手动增减
padding值，观察总宽度是否稳定不变 - 如果总宽随
padding变化而浮动，说明要么被更高优先级规则覆盖，要么该input处于flex-basis: auto且没设min-width: 0
最容易被忽略的是：当你看到元素宽度“刚好”等于父容器，却仍有横向滚动条，大概率是某个子元素（比如未重置的 img、伪元素、或 flex 项）悄悄溢出了 —— box-sizing 只改尺寸定义方式，不管内容本身会不会撑开边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
