应使用 normalize.css 而非全局重置 margin/padding，因其保留表单控件等关键默认样式以保障可访问性与交互体验，仅修复跨浏览器不一致问题。
直接用 normalize.css，别手写 * { margin: 0; padding: 0 } —— 它会把 button、input、select 的原生间距全干掉，反而让表单控件挤在一起、难以点击。
为什么不能全局清空 margin 和 padding
浏览器对表单元素的默认 margin 和 padding 是有实际交互意义的。比如 Firefox 给 button 加了上下 0.25em 内边距，Chrome 给 input[type="search"] 右侧留了清除按钮空间。一旦用通配符强制归零：
-
button在 Firefox 里会紧贴文字，点击热区变小 -
textarea的默认行高和内边距消失，光标靠边、输入体验变差 -
details/summary这类语义化标签可能完全失去可读性
normalize.css 比 reset.css 更适合现代项目
normalize.css 不是“清空”，而是“修复”：它保留有用的默认行为（如标题的相对字号、列表的缩进、表单控件的可访问性样式），只修正已知的跨浏览器 bug。例如：
- 统一
h1～h6的margin-top/margin-bottom比例，而不是全设为0 - 让
audio和video在 IE9+ 和 Safari 中都显示控制栏 - 修复旧版 Safari 对
display: table-cell的垂直对齐 bug
引入方式很简单，在 中靠前加载：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
注意：必须放在你自己的 CSS 文件之前，否则它的基础修复会被你的规则覆盖。
遇到 <mark></mark>、<details></details> 这类 HTML5 标签显示不一致怎么办
这类标签的 UA 样式差异极大：<mark></mark> 在 Chrome 是黄底，Firefox 是透明底（依赖系统高亮色），Safari 早期版本甚至无样式；<details></details> 在 IE 和旧 Edge 中根本不渲染。
解决逻辑很明确：不依赖 UA，默认样式必须显式声明。
- 对
<mark></mark>，至少写一条：mark { background-color: #ffeb3b; color: #212121; } - 对
<details></details>，IE/Edge Legacy 需配合html5shiv，且要补details, summary { display: block; } - 检查是否被深色模式干扰：Firefox 在深色系统下可能把
mark渲染成浅灰，加@media (prefers-color-scheme: dark)单独调色
真正难处理的不是“怎么统一”，而是“统一到哪一层”——normalize.css 解决的是共性问题，但像 scroll-behavior: smooth 或 aspect-ratio 这种属性，得靠特性检测 + 降级方案，不能指望一个 CSS 文件包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
