表单控件必须显式设置 box-sizing: border-box，因其不继承通配符重置，否则 width: 100% + padding 会撑破容器；需单独声明 input、textarea、select、button，并注意 Flex/Grid 中的尺寸校准与兼容性问题。
box-sizing: border-box 必须加在表单控件上，否则 width: 100% + padding 会直接撑破容器——这不是 bug，是浏览器对 input、textarea、select 的默认行为。
为什么表单控件不继承 box-sizing
即使你写了 * { box-sizing: border-box }，input、textarea、select 在 Safari、旧版 Chrome 和多数安卓 WebView 中仍按 content-box 计算。它们的渲染逻辑独立于普通元素，伪类重置（*::before）也无效。
- JS 获取
getBoundingClientRect().width返回值比 CSS 声明的width大2 * padding + 2 * border-width - Flex 容器里设了
flex: 1，但表单控件实际宽度超限，导致换行或横向滚动条 - 第三方组件库（如 Vant 的
.van-field__control）可能用更具体选择器覆盖你的重置规则
必须显式声明的表单控件选择器
只靠通配符不够，得单独命中这些元素：
-
input（含所有类型：text、email、number等） textareaselect-
button（尤其带type="submit"的按钮，常被忽略）
推荐写法：
立即学习“前端免费学习笔记（深入）”；
input,
textarea,
select,
button {
box-sizing: border-box;
}若被组件库覆盖，加 !important 或提高权重，例如：input.van-field__control { box-sizing: border-box !important; }
border-box 下表单控件的尺寸校准要点
box-sizing: border-box 改的是计算方式，不是魔法——旧代码里“预留内容宽度抵 padding”的写法会失效，必须手动调整：
-
border必须写全三元组：border: 1px solid #ccc，避免只写border: 1px导致样式继承异常 -
padding推荐用像素值：padding: 12px 16px，百分比或em在表单中易受字体缩放干扰 - 用
calc()扣边框时注意空格：width: calc(100% - 4px)✅，calc(100%-4px)❌（部分安卓 WebView 静默失败）
Flex/Grid 容器中的表单控件要额外处理
即使父容器设了 display: flex 或 display: grid，子项的 box-sizing 也不会继承。如果表单控件在 Flex 项里还写了 width: 100%，它仍会按 content-box 解析，导致 flex-basis 计算失准。
- 方案一：给表单控件本身加
flex: 1，去掉width: 100%（更符合 Flex 语义） - 方案二：保留
width: 100%，但必须确保该控件已声明box-sizing: border-box - Grid 场景下，混用
fr和带padding的绝对宽（如200px），容易触发隐式min-content计算，列宽可能意外收缩
最常被忽略的点：表单控件的 box-sizing 问题不会报错，只会悄悄让布局偏移、JS 尺寸读取不准、移动端出现横向滚动条——检查时优先看 computed style 里的 box-sizing 值，别只信你写的 CSS 文件。
