表单元素默认样式差异大，需全局重置box-sizing为border-box并统一vertical-align:middle；label与input错位主因是baseline对齐问题；flex布局换行应包裹容器而非单独设置；Grid中需统一高度和align-items。
表单元素默认样式差异大，直接写 HTML 容易错位
浏览器对 <input>、<select></select>、<textarea></textarea> 等表单控件的默认 box-sizing、padding、border、line-height 和 vertical-align 处理不一致。比如 Chrome 下 <input type="text"> 默认 box-sizing: content-box，而 <textarea></textarea> 可能表现不同；Firefox 对 select 的内边距控制也更“固执”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：在 CSS 开头加
*, *::before, *::after { box-sizing: border-box; } - 针对性统一：为所有表单元素显式声明
box-sizing: border-box、margin: 0、vertical-align: middle - 避免混用
display: inline和display: inline-block—— 后者更可控，且需注意vertical-align影响基线对齐
label 和 input 水平排列时对不齐
常见现象是 <label></label> 文字和 <input> 输入框上下错开，尤其在小字号或使用自定义字体时。根本原因是 vertical-align 缺省值为 baseline，而文字基线与表单控件的“视觉基线”不重合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
label和表单控件同时设vertical-align: middle（不是top或bottom，后者会因行高变化失效） - 确保父容器有明确的
line-height（如line-height: 1.5），否则vertical-align: middle的参考基准不稳定 - 若仍偏移，检查是否被
font-size或font-family影响 —— 某些字体（如系统 San Francisco）在小尺寸下字形下沉明显，可临时加transform: translateY(-1px)微调（仅限必要场景）
响应式表单中 flex 布局换行错乱
用 display: flex 排列 label+input 组合时，加了 flex-wrap: wrap 后，小屏下常出现 label 换行但 input 还卡在上一行，或者整个组被强行拆开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要对单个
<label></label>和<input>分别设flex属性，而是把它们包进一个<div class="form-field">，再对这个容器设 <code>flex: 1 1 0或min-width: 200px - 在媒体查询中改
flex-direction: column而非依赖wrap—— 更可控，且能保证 label 在 input 上方 - 禁用
white-space: nowrap（某些 UI 库默认加了），它会阻止 label 内容正常折行，导致宽度异常撑开 - 统一设置
height或min-height（如min-height: 36px），并配合padding控制实际可输入区域 - 对
textarea单独处理：设resize: vertical+min-height: 80px，避免用户拖拽破坏网格结构 - 避免用
align-items: stretch（Grid 默认值）强制拉伸 —— 改为align-items: center或start，再靠padding和line-height对齐内容
使用 CSS Grid 布局时表单控件高度不一致
Grid 中设 grid-template-rows: auto 或 minmax(min-content, max-content) 后，<input>、<select></select>、<textarea></textarea> 高度仍参差不齐，尤其 textarea 默认多行导致行高叠加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
vertical-align 和 box-sizing 的影响预估不足。
