box-sizing: border-box 必须同时应用于 input 和 button 才能稳定对齐，因二者默认盒模型不同：button 为 border-box（border/padding 含在 height 内），input 为 content-box（border/padding 外扩），仅设相同 height 会导致视觉错位；line-height 比 height 更可靠，尤其在 Flex 布局中能自然居中并拉齐高度。
直接给 input 和 button 同时设 box-sizing: border-box，再配 line-height，是唯一稳定解法。只改一边、只调 height 或依赖 vertical-align，都会在不同浏览器或字号变化后失效。
为什么 height 设一样还是不对齐
因为 button 在所有现代浏览器中默认按 Quirks 模式计算高度：它的 border 和 padding 被算进声明的 height 内部；而 input 默认是标准模式下的 content-box，border 和 padding 往外撑。结果就是——同样写 height: 40px，button 的内容区被压缩，视觉上反而“矮一截”。
常见错误现象：
- Chrome/Safari 中
button看起来比input低 1–2px - 加了
vertical-align: middle仍错位（基线对齐在 flex 下根本不起作用） - 改
font-size后高度又漂移（line-height没同步更新）
box-sizing: border-box 是必选项，且必须同时作用于两者
不统一就等于没做。哪怕只漏一个元素，或某个子组件没继承到，立刻破功。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须同时写在
input, button选择器里，不能只加input或只加button - 不用写
-webkit-/-moz-前缀，Chrome 80+、Firefox 75+、Safari 14+、Edge 90+ 全支持 - 如果项目要兼容 IE8，才需补全局重置：
* { box-sizing: border-box; }
line-height 比 height 更可靠，尤其在 Flex 布局下
height 是硬约束，和字体、字号、行距强耦合；line-height 是软撑开，能自然居中文本，且在 display: flex 容器中会自动拉齐子项高度。
实操建议：
- 用无单位数字，如
line-height: 1.5，避免继承污染 - 配合
font-size使用：比如font-size: 14px+line-height: 1.5→ 实际行高 ≈ 21px，容器总高应贴近这个值（再加 padding 后凑整） - 不要单独给
input或button设height，除非你明确要覆盖 Flex 的拉伸行为
Flex 布局下别碰 width: 100%
在 display: flex 的父容器里，给 input 设 width: 100% 会导致它试图占满整个父宽，把 button 挤到下一行或溢出。
正确做法：
- 父容器保持默认
align-items: stretch（不用显式写） -
input加flex: 1，自动吸收剩余空间 -
button不设flex，靠内容宽度或显式width控制尺寸
最易被忽略的一点：box-sizing: border-box 单独生效的前提，是同时显式声明 padding 和 border。如果只写 box-sizing，但没重置 UA 默认的 padding: 1px 2px 或 border: 1px solid #ccc，某些浏览器仍会按旧逻辑解析高度。
