label 和 input 总是错位？用 flex 布局直接对齐
默认情况下 label 和 input 是行内元素，但浏览器对表单控件的默认 vertical-align、line-height、padding 处理不一致，尤其在 input[type="checkbox"] 或 input[type="radio"] 上特别明显——看起来像“飘着”或“压着底边”。Flex 是最可控、兼容性够用（IE10+）的解法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
label和input包进一个容器（比如div），给容器设display: flex; align-items: center; - 避免只对
label或只对input单独设vertical-align，它依赖父级行高，不可靠 - 如果 label 文字多行，加
flex-wrap: wrap;并用align-items: flex-start;防止文字被 input 顶偏 - 注意：IE10/11 对
flex的min-width行为有 bug，若 input 宽度异常收缩，显式加min-width: 0;到 input 上
Grid 布局适合多字段横向对齐场景
当你要让一组 label + input 在横向上严格对齐（比如表单有“姓名”“邮箱”“电话”三列），Grid 比 Flex 更精准，因为它天然按网格线定位，不依赖内容尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对父容器设
display: grid; grid-template-columns: 120px 1fr 120px 1fr;（label 固宽 + input 自适应） - 每个
label设grid-column: 1;，对应input设grid-column: 2;，下一对再设grid-column: 3 / 4;，以此类推 - 不要用
grid-auto-flow: column;来自动排布，容易让 label 和 input 错行——必须显式控制列位置 - Grid 在 Safari 旧版本（grid-column 的隐式起始值处理有偏差，建议始终写全，如
grid-column: 1 / 2;
为什么不用 float 或 inline-block？
float 会触发 BFC，导致父容器高度塌陷，还得清浮动；inline-block 受制于换行符和字体大小，vertical-align: middle 在不同 input 类型上表现差异极大（比如 textarea 和 select 就经常对不齐）。
常见错误现象：
- label 看起来“比 input 高半像素”，其实是
font-size和line-height在 inline 场景下参与了基线计算 - input 宽度在 Chrome 和 Firefox 下显示不一致，因为
box-sizing默认值不同（Chrome 是border-box，Firefox 早期是content-box） - 移动端键盘弹出后，某些安卓 WebView 会重绘失败，
inline-block布局突然错位，flex/grid 更稳定
移动端 checkbox/radio 的对齐要额外处理
原生 input[type="checkbox"] 和 input[type="radio"] 在 iOS 和部分安卓系统里渲染尺寸极小（约 12×12px），且无法直接通过 width/height 放大，强行设置会导致点击区域变小或样式断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
appearance: none;隐藏原生控件，用::before或::after伪元素画自定义样式 - 此时对齐逻辑不变：仍靠父容器
display: flex; align-items: center;控制垂直居中 - 务必给伪元素设
pointer-events: none;，否则会挡住原生 input 的点击 - 别忘了加
cursor: pointer;到 label 上，不然用户感知不到可点
