直接用 normalize.css 而非 * { margin: 0; padding: 0; }，因后者破坏语义、损害可访问性、拖慢渲染且不解决跨浏览器根本差异；normalize.css 仅校准不一致，默认保留有用样式与交互行为。
直接用 Normalize.css，别手写 * { margin: 0; padding: 0; } —— 它看起来省事，但会破坏语义、影响可访问性，还拖慢渲染。
为什么通配符重置（* { margin: 0; padding: 0; }）不推荐
它确实能“清掉”默认间距，但副作用太明显：
- 强制重置所有元素（包括
::before/::after伪元素），可能让图标字体、计数器等失效 - 抹掉浏览器对
<strong></strong>、<em></em>、<blockquote></blockquote>等语义标签的合理默认样式，等于放弃语义价值 - CSS 选择器性能差：每次 DOM 变化都要匹配全部节点，现代项目中尤其敏感
- 不解决根本问题：比如
<ul></ul>在 Chrome 用padding-left缩进，Firefox 用margin-left，通配符只清一边，残留差异仍在
Normalize.css 是什么，怎么接入
它不是“清零”，而是“校准”：保留有用的默认样式（如 <h1></h1> 的层级感、<button></button> 的可点击反馈），只修正跨浏览器不一致的部分（如表单控件边框、<pre class="brush:php;toolbar:false;"></pre> 的空白处理、font-size 继承逻辑）。
接入方式极简：
- 用 npm：
npm install normalize.css，然后在入口 CSS 或 JS 中@import 'normalize.css'; - CDN 直引：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"> - 不建议复制粘贴整段源码——版本更新快，手动维护易过期
局部重置比全局更可控
真要覆盖某类元素（比如组件内部的列表或表单），优先用特异性更高的规则，而不是污染全局：
- 清除组件内列表默认样式：
.my-card ul, .my-card ol { list-style: none; padding: 0; margin: 0; } - 重置按钮默认外观：
button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; } - 慎用
all: unset：它会清掉display、visibility甚至direction，导致布局崩塌或 RTL 失效
真正难的不是“怎么重置”，而是判断“该不该重置”——比如 <details></details> 的默认箭头、<input type="date"> 的原生控件样式，强行重置反而降低可用性。留哪些、动哪些，得看产品对一致性与原生体验的取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
