直接给 input 和 button 同时设 box-sizing: border-box 与 line-height 更可靠，因 button 默认用 Quirks 模式（border/padding 算在 height 内），input 默认 content-box（border/padding 往外撑），导致同写 height: 40px 时视觉错位；box-sizing: border-box 实现「声明即所得」，line-height 比 height 更适配文字垂直居中且免耦合，Flex 下应让 input flex: 1、button 不设 width: 100%，移动端放大点击区域宜用 transform: scale() 而非 padding/font-size。
直接给 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仍错位（基线对齐不可控） - 改
font-size后高度又漂移（line-height未同步）
box-sizing: border-box 是必选项
统一用 border-box 才能真正让「声明即所得」。否则哪怕只漏一个浏览器前缀，或某个元素没继承到，就立刻破功。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须同时作用于
input和button，不能只加一边 - 不用写
-webkit-/-moz-前缀了，现代浏览器全支持box-sizing - 如果项目要兼容 IE8，才需补
* { box-sizing: border-box; }这类通配符重置
line-height 比 height 更适配文字垂直居中
设固定 height 容易和字体、字号、行距耦合；而 line-height 能自然撑开容器并居中文本，且 Flex 下会自动拉齐子项高度。
关键点：
-
line-height值建议用无单位数字（如1.5），避免继承污染 - 配合
font-size使用：比如font-size: 16px+line-height: 1.5→ 行高 ≈ 24px，容器高度也应贴近这个值 - 不要给
input或button单独设height，除非你明确需要覆盖 Flex 的拉伸行为
Flex 布局下别碰 width: 100%
在 display: flex 的父容器里，给 input 设 width: 100% 会导致它试图占满整个父容器宽度，把 button 挤到下一行或溢出。
正确做法是：
- 父容器设
align-items: stretch（Flex 默认值，不用显式写） -
input加flex: 1，自动吸收剩余空间 -
button不设flex，靠内容宽度或显式width控制尺寸 - 去掉
button左边框（border-left: none），和input共享一条边线
真正容易被忽略的是：移动端点击区域放大时，别用 padding 或 font-size 硬撑按钮——这会破坏 line-height 与 box-sizing 建立的高度一致性。要用 transform: scale() + transform-origin，它不参与布局计算。
