必须重置body、h1–h6、p、ul、ol、li、a、img等盒模型干扰强的标签，因浏览器user agent stylesheet不一致；通配符重置有副作用，应显式列举并分清重置与基础样式的边界。
HTML 标签没有“默认样式”，你看到的 p 有上下边距、ul 有圆点、h1 字体粗大，全是浏览器内置的 user agent stylesheet 在起作用——它不可控、不一致，必须重置。
为什么直接写 p { margin: 0; } 不够用
单条规则只能解决一个标签，但实际项目中会遇到多个干扰源：
-
margin和padding在不同浏览器对body、h1、ul的初始值差异明显（比如 Chrome 给body默认8pxmargin，Firefox 可能是0） -
ul和ol不仅带padding-left，还自带list-style，漏掉任一都会导致列表缩进错乱 -
img在 IE 中默认有border，在现代浏览器中可能因vertical-align导致基线对齐异常 - 只清
p不清blockquote或pre，它们的默认margin仍会撑开布局
哪些标签必须出现在重置清单里
不是所有标签都需要重置，重点盯住盒模型表现强、语义明确但视觉干扰大的那一批：
-
body、h1–h6、p：文本流主干，margin/padding 必清 -
ul、ol、li：列表结构，list-style和padding都要归零 -
img、input、button：替换元素，vertical-align和border易出问题 -
a：默认带text-decoration: underline和color: blue，不重置会污染全局链接样式
像 span、em、strong 这类纯内联语义标签，本身不触发盒模型，无需重置 margin/padding。
reset.css 里要不要写 * { margin: 0; padding: 0; }
通配符重置看似省事，但副作用明显：
- 它会把
svg、math等现代标签也拉进来，某些场景下反而破坏原生行为 - 对伪元素
::before/::after也生效，可能误清你手动插入的内容 - 性能上，浏览器需遍历全部节点匹配
*，比精准选择器略慢（虽可忽略，但属不良习惯） - 更关键的是：它掩盖了“哪些标签真需要干预”的判断过程，容易漏掉
fieldset、textarea等边缘但重要的标签
推荐写法是显式列出目标标签：body, h1, h2, h3, p, ul, ol, li, a, img { margin: 0; padding: 0; }，再单独处理特殊项（如 img { vertical-align: top; }）。
重置后怎么给标签加基础样式
重置只是清零，不是放弃控制。后续样式应基于语义而非视觉猜测：
-
p加margin-bottom而非margin-top，符合文档流自然间距逻辑 -
h1–h6用font-weight和line-height区分层级，避免仅靠font-size堆砌 -
ul清完padding后，若需缩进，用margin-left控制，而非恢复padding-left - 所有文字类标签统一设
font-family和line-height，防止局部继承断裂
真正容易被忽略的，是重置和基础样式之间的边界——重置只管“清除浏览器干扰”，基础样式只管“建立最小可用规范”。混在一起写，后期维护时根本分不清哪行是清 bug，哪行是定规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
