必须统一设border: none和具体padding值（如0.375rem 0.75rem），textarea加resize: none，fieldset子元素用> *重置margin，label与表单控件统一vertical-align: middle，并全局设box-sizing: border-box。

input/select/textarea 默认边框和内边距怎么清？ 浏览器对表单控件有强 UA 样式：Chrome/Firefox 给 input、select、textarea 默认加了 border: 1px solid #ccc 和 padding: 1px 6px（textarea 还带 resize）。不显式重置，控件高度、对齐会因浏览器而异。

• 必须统一设 border: none 或 border: 0（二者等效，但 none 更明确语义）
• padding 要设为具体值，比如 padding: 0.375rem 0.75rem，别用 padding: 0——否则文字贴边，可读性差
• textarea 额外加 resize: vertical 或 resize: none，避免拖拽破坏布局
• 别漏掉 button 和 input[type="submit"]，它们也有默认 border 和 padding

fieldset 内部控件间距总对不齐？fieldset 自身有默认 padding: 0.35em 0.625em 0.75em，且子元素（如 input）的 margin 在不同浏览器中表现不一致，混用时容易错位。

• 直接写 fieldset > * { margin-bottom: 0.5rem; }，比依赖各控件自身 margin 更可控
• 不要在 fieldset 上设 line-height 或 font-size，这会影响 legend 的垂直定位计算
• 如果用了 CSS Grid 布局，可设 fieldset { display: contents; } 让它不参与盒模型——但注意：IE 不支持，且屏幕阅读器可能跳过 legend，仅限纯视觉优化场景

label 和 input 水平对齐老是偏移？label 默认是 inline 元素，input 是 replaced element，默认 vertical-align: baseline，导致文字底部与输入框底边对不齐。

• 统一设 label, input, select, textarea { vertical-align: middle; } 是最稳解法
• 不要用 display: block 强制换行再 float，响应式下易崩
• 若 label 文字较长需折行，加 display: inline-block; width: 120px; vertical-align: top;，让 input 始终对齐 label 顶部

为什么 reset 后表单控件看起来“变小了”？ 清掉默认 border 和 padding 后，控件视觉尺寸收缩，是因为浏览器 UA 样式里还藏着两个隐形影响项：

• box-sizing 默认是 content-box，但现代 UI 框架习惯用 border-box；建议全局加 input, select, textarea, button { box-sizing: border-box; }
• font-family 缺失会导致 fallback 到系统字体，字号渲染偏差大；至少指定 font-family: system-ui, -apple-system, sans-serif;
• height 不要硬设像素值（如 height: 36px），优先用 min-height: 36px + padding 控制，兼容不同字号缩放设置

实际项目里，最常被忽略的是 legend 的定位逻辑和 textarea 的 resize 行为——它们不会报错，但会在某个 Safari 版本或高缩放比下突然错位。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！