只写 * { box-sizing: border-box } 不够用，因 input 等表单控件是替换元素，部分浏览器（如 Safari、Android WebView）不继承该属性，且第三方库可能用 !important 覆盖；必须显式声明 input, textarea, select, button { box-sizing: border-box; } 并同步重置 padding、border 和 font-size。
直接给 input 显式声明 box-sizing: border-box，并同步重置 padding、border 和 font-size，否则它永远按 content-box 往外撑，和其他控件对不齐。
为什么只写 * { box-sizing: border-box } 不够用
通配符在多数浏览器里确实生效，但 input 是替换元素（replaced element），部分 Android WebView 和旧版 Safari 会忽略继承；更关键的是，某些第三方 UI 库（如 Vant）用 !important 强制设回 content-box，导致你的全局规则被覆盖。DevTools 里检查 computed 样式，常会发现 input 的 box-sizing 仍是 content-box。
必须单独加固：
-
input、textarea、select、button都要列进选择器，不能漏 - 如果用了 CSS-in-JS 或 scoped style，权重不够时加
:not([disabled])这类伪类提升 specificity，比!important更可控 - 特别注意
input[type="search"]：Safari 默认是content-box，哪怕父级设了border-box也不继承
input 的 padding 和 border 必须显式写死
不同浏览器给 input 的默认 padding 差异极大：Chrome 是 1px 6px，Firefox 是 1px 2px，iOS Safari 在缩放后还可能动态调整。不写死，box-sizing: border-box 就只是“名义上”生效——声明的 width 看似含边框内边距，实际渲染宽度仍飘移。
实操建议：
- 统一设为
padding: 8px 12px（或根据设计稿换算后的像素值），别用em/rem，移动端 WebView 对相对单位解析不稳定 -
border推荐用1px solid transparent：占位不显色，避免 IE 下“隐形挤压”，也防止无边框时因渲染差异导致高度跳变 - 如果项目需兼容 IE8，还得补
line-height: 1.4+height: 28px，否则文字贴顶或截断
字体和行高必须协同控制，否则垂直居中失效
input 的文字垂直位置不是靠 padding-top/padding-bottom 对称就能调准的。各引擎对字体度量（ascent/descent/line gap）的处理不同，尤其在小字号（如 14px）下，line-height: normal 在 Safari 和 Chrome 中解析结果可能差 1–2px。
真正可控的做法：
- 用
height+line-height+padding三者联动：比如设height: 44px，就配line-height: 44px和padding: 0 12px - 禁用
-webkit-appearance: textfield（iOS 旧版），它会偷偷覆盖你设的font-size和line-height - 慎用
line-height: 1：压缩 descender 空间，g、y类字母下延部分容易被裁切；line-height: 1.2或normal更稳妥 - 如果用了自定义字体，确保
@font-face加载完成后再应用样式，否则首屏会闪动回退到系统字体
Flex 布局下别碰 width: 100%，改用 flex: 1
在 display: flex 容器里给 input 设 width: 100%，它会试图占满整个父容器宽度，把旁边的 button 挤出视口或折行。这不是盒模型问题，而是 Flex 的尺寸分配逻辑被误触发。
正确姿势：
- 父容器保持默认
align-items: stretch -
input加flex: 1，自动吸收剩余空间 -
button不设flex，靠内容宽度或显式width控制尺寸 - 如果按钮需放大点击区域，用
transform: scale(1.1)，别靠padding或font-size拉伸，否则会破坏盒模型一致性
最易被忽略的一点：box-sizing: border-box 单独声明是无效的——它只有在同时存在显式的 padding 和 border 时，才能真正让 width/height “声明即所得”。没写 padding？那它还是 content-box 的行为逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
