必须设置 box-sizing: border-box 才能使 height 属性生效，否则 padding 和 border 会额外撑高；再配合固定 height 与上下 padding 微调文字垂直居中，同时重置 select、button 的 UA 样式并统一处理自定义控件的对齐逻辑。
input和textarea高度不听height控制？先看box-sizing
默认情况下，input 和 textarea 的 height 属性常“失效”，实际高度比设的值高——这是因为它们默认是 content-box，而 padding 和 border 会额外撑开空间。
真正可控的高度，得靠 box-sizing: border-box。加了它，height 才代表“总高度”，含内边距和边框。
-
box-sizing: border-box是必须加的，否则所有后续高度调整都在猜 - 浏览器兼容性没问题，IE8+ 都支持，不用加前缀
- 建议全局重置：
input, textarea, select, button { box-sizing: border-box; }
用padding微调表单元素视觉高度最稳妥
单纯改 height 容易在不同浏览器或字体下表现不一，尤其带文字的 input；而 padding 直接推挤文字位置，对齐更可靠。
典型做法：固定 height（如 36px），再用上下 padding 控制文字垂直居中。注意行高（line-height）一般不单独设，它会被 padding 自然撑开。
立即学习“前端免费学习笔记（深入）”；
- 示例：
height: 36px; padding: 8px 12px; box-sizing: border-box;→ 文字上下留白各 8px，总高刚好 36px - 若只改
padding-top不配padding-bottom，文字会偏上，视觉失衡 - 移动端要防缩放导致 padding 失效，可加
min-height: 36px做兜底
select和button在Chrome/Firefox里高度行为不一致
select 在 Chrome 中会把箭头图标算进内容区，即使设了 box-sizing: border-box，height 仍可能被撑大；Firefox 更“守规矩”。button 则受默认 border 和 font-size 影响更大。
-
select推荐统一用height + padding + border组合，并加appearance: none移除原生样式干扰 -
button必须重置border和font，否则不同 UA 样式会让height表现飘忽 - 不要依赖
line-height垂直居中button文字——它在 flex 布局或换行时会出问题
自定义表单控件（如switch、radio）高度对齐难在哪
这类控件本质是 input[type="checkbox"] 或 input[type="radio"] 加伪元素或包裹标签，真实 input 默认不可见，高度由父容器或伪元素决定。
常见错误是只调外层 label 高度，却没约束内部 input 的 vertical-align 或伪元素的 top/transform 偏移，导致和旁边文本或 input 错位。
- 确保
input本身设position: absolute或opacity: 0，避免它参与文档流影响高度计算 - 伪元素（如
::before）用top: 50%; transform: translateY(-50%)对齐，比固定top值更适应不同字号 - 如果和文字混排，给
label设display: inline-flex; align-items: center;，比vertical-align: middle更稳
box-sizing、padding、font-size 和浏览器 UA 样式之间反复角力的结果，漏掉任意一环都可能让“调好”的高度在另一个环境里突然崩掉。 
