最简CSS统一控制表单元素对齐：为每行设display: flex; align-items: center; gap: 0.5rem;，<label>设min-width: 8em;，所有控件统一margin: 0; padding: 0.375rem 0.75rem; box-sizing: border-box;，禁用vertical-align。
表单元素对齐不一致，怎么用最简CSS统一控制
默认情况下 <input>、<select>、<textarea> 的行高、内边距、垂直对齐方式各不相同，直接堆叠会导致视觉错位。不用框架时，优先用 display: flex + align-items: center 控制每行标签与控件的基线对齐。
- 给每个
<div class="form-row">设置display: flex; align-items: center; gap: 0.5rem; -
<label>设固定宽度（如min-width: 8em;），避免文字长短影响布局 - 所有表单控件统一设
margin: 0; padding: 0.375rem 0.75rem;和box-sizing: border-box; - 禁用
vertical-align，它在 flex 布局下无效且易引发混淆
单选/复选框文字紧贴控件，如何安全加间距又不破坏可点击区域
直接在 <input type="checkbox"> 后加空格或 margin 会切断原生点击关联——点击文字无法选中。正确做法是把文字包进 <label>，再用 display: flex 分离控件与文本。
- 结构必须为：
<label><input type="checkbox">选项文字</label> - 给
<label>加display: flex; align-items: center; gap: 0.5rem; - 确保
<input>不设margin，间距全由gap控制 - 避免对
<input>设置width/height，改用accent-color调整颜色即可
提交按钮点击后页面跳转或刷新，怎样静默提交并保留用户填写状态
默认 <form> 提交会触发完整页面加载，问卷中途刷新等于前功尽弃。核心是阻止默认行为，用 fetch 或 XMLHttpRequest 发送数据。
- 给
<form>绑定submit事件，第一时间调event.preventDefault() - 收集数据用
new FormData(formElement)，它自动忽略未选中的radio和空input - 提交后若需反馈，用
formElement.reset()清空或仅禁用按钮防重复点击 - 不要用
location.reload()或window.history.back()，它们破坏填写连续性
移动端小屏上表单挤成一团，哪些CSS属性必须设置
纯靠 width: 100% 不够，iOS Safari 对 input 默认缩放、安卓键盘弹出后视口计算异常，得组合控制。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">必加 - 所有表单控件设
width: 100%; max-width: 100%;防溢出 - 禁用
input自动缩放：-webkit-text-size-adjust: 100%; - 给
<textarea>设min-height: 6em;，避免初始高度过小导致输入时频繁重排
复杂点在于不同机型对 vh 单位响应不一，键盘弹起时视口高度变化不可靠，所以表单容器尽量避免依赖 vh 布局。
