label 和 input 垂直错位主因是 flex 容器 align-items: stretch 导致基线不一致；设 align-items: center 可解决多数情况，但需注意 ie11 需加 min-height、移动端 label 长短不一需用 flex: 0 0 120px 统一基准，ios/android 渲染差异需统一 box-sizing、font-size≥16px 及 flex: 1 + max-width: 100%，absolute 提示文字偏移则需确保最近定位祖先为直接父容器。
label 和 input 垂直错位，是因为 align-items 默认 stretch
flex 容器里 align-items 默认是 stretch，这会让 label 和 input 都拉伸到容器高度——但它们盒模型不同：label 是内联元素，input 是替换元素，基线（baseline）天然不一致。视觉上就表现为“文字贴底、输入框浮高”或反过来。
- 直接设
.form-row { align-items: center; }能解决 90% 的错位，前提是label和input是同一父容器的直系子元素 - 别给
label写vertical-align—— flex 里它完全无效 - 混用
textarea或select时，align-items: center可能让文字“飘在中间”，这时改用align-items: flex-start+ 单独给input加align-self: center更稳 - IE11 下
align-items: center经常失效，必须加min-height: 40px（匹配常见 input 行高），否则它根本不算交叉轴范围
移动端 label 文字长短不一，导致 input 起始位置左右飘移
这不是对齐问题，是基准没统一。label 默认 flex-shrink: 1，短 label（如“姓名”）被压缩，长 label（如“确认新密码”）撑开整行，input 的左边缘就跟着乱跑。
- 强制
label不缩放：flex: 0 0 120px（等价于flex-shrink: 0+width: 120px），比单纯写width更安全，避免和input的flex: 1冲突 -
label内容可能超长？加white-space: normal; word-break: break-word;，别用overflow: hidden截断可读性 - 别给
input设width: 100%—— 它会和flex: 1计算打架，Safari 中尤其容易宽度过大、换行或溢出
为什么 iOS 上 label 总忽大忽小、Android 上 placeholder 偏上
这不是 bug，是渲染引擎差异被 flex 放大了：iOS Safari 给 input 设了默认最小宽度（约 150px），又叠加 flex 自动伸缩；Android Chrome 则对 line-height 和 padding 解析更敏感。
-
input必须加flex: 1或width: 100%，同时配max-width: 100%防撑破容器 - 统一用
box-sizing: border-box，避免padding/border计算偏差 -
font-size不能低于16px，否则 Safari 会强制缩放，破坏布局 - 禁用
-webkit-appearance: none仅在需要自定义圆角时加，否则可能干扰内边距计算
表单中 absolute 定位的提示文字突然偏移
根本不是 top 或 left 写错了，而是定位上下文变了——position: absolute 的元素会以最近的非 static 祖先为参考点，这个祖先很可能不是你预期的父容器。
- 给包裹
input的直接父容器（比如.form-group）显式加position: relative，确保它是最近的已定位祖先 - 检查是否有多层嵌套，别把
relative加在最外层wrapper上，结果absolute子项却以它为基准 - 某些 UI 框架（如 Ant Design 的
Form.Item）内部已有定位结构，加absolute前先 inspect 元素层级，避免冲突 - 如果父容器有
overflow: hidden，且absolute元素超出范围，会被裁剪——临时改为visible排查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
