全局重置 * 会破坏表单点击热区、pre/blockquote 语义结构及 Flex/Grid 布局；应按需重置特定元素，优先选用 normalize.css，并为表单控件手动补全交互与可访问性样式。
别用 * { margin: 0; padding: 0; } 全局清，它会破坏表单控件可点击区域、搞乱 pre 和 blockquote 的语义结构，还可能让 Flex/Grid 布局意外塌陷。
为什么全局重置 * 会出问题
浏览器对不同元素的默认样式有明确设计意图：input、textarea、select 依赖默认 padding 扩大点击热区；pre 的缩进和 blockquote 的外边距是可读性基础；现代布局引擎（如 Grid）会把 margin: 0 当作真实布局约束参与计算，导致子项换行或对齐偏移。盲目归零等于主动放弃这些隐式保障。
应该重置哪些元素（按需清单）
只对明确要自定义的元素下手，常见组合如下：
-
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, pre, hr, form, fieldset, legend, button, input, textarea, th, td—— 这些是真正存在跨浏览器差异且常被重写的 -
ul, ol加list-style: none;，避免圆点/数字干扰设计 -
img加border: none;，防止带链接时出现蓝边框 -
table加border-collapse: collapse; border-spacing: 0;，消除单元格间隙 -
a加text-decoration: none;，再单独定义:hover行为
normalize.css 比 reset 更适合现代项目
如果你用的是 React/Vue/Tailwind 等现代技术栈，normalize.css 是更安全的选择——它保留 h1 比 h2 大、small 缩小字号等合理默认，只修复渲染不一致（比如 Firefox 和 Chrome 对 button 的 line-height 计算差异）。注意：normalize.css 不动 appearance，所以 button 仍需手动加 -webkit-appearance: none; 才能彻底去原生样式。
按钮和表单控件必须单独处理
它们的“默认样式”不是单纯靠 margin/padding 构成的，而是混合了 appearance、background、border、outline 四层：
-
button, input[type="button"], input[type="submit"]必须统一设border: none; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; -
input, textarea, select要加font: inherit; line-height: normal;，否则字体大小和基线在 Safari/Chrome 下不一致 - 去掉
outline时不能只写outline: none;，得配合:focus-visible保证键盘可访问性，否则 WCAG 会报错
真正难的不是“怎么清”，而是“清完之后谁来接管渲染逻辑”——比如你清掉了 button 的所有默认，就得立刻补上 cursor: pointer 和焦点反馈，否则用户根本不知道它能点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
