应使用normalize.css而非*{margin:0;padding:0}，因其修复跨浏览器差异、保留语义化默认样式（如标题层级、表单控件可访问性），避免破坏原生间距、焦点轮廓及交互逻辑，且性能更优、可维护性更强。
直接用 normalize.css，别手写通配符重置——它修正差异而不破坏语义，调试成本低、可维护性强，适合绝大多数项目。
为什么 * { margin: 0; padding: 0 } 是个坏主意
它看似省事，实则埋坑：强制 fieldset、textarea、input[type="search"] 丢掉原生间距和交互逻辑，表单控件常错位或失焦；details/summary 的默认折叠行为会被清空；移动端 input[type="number"] 的增减按钮、select 的下拉箭头可能消失或偏移。
更隐蔽的问题是权重太低：button { margin: 8px } 一写，通配符规则立刻被覆盖，导致你反复检查 DevTools 却找不到原因。
-
*选择器性能差，尤其在 DOM 深度大时触发重排开销明显 - 它不区分语义，把
th和svg一视同仁归零，后续还得手动补回 - 破坏屏幕阅读器对
:focus和:focus-visible的识别逻辑
如何正确引入 normalize.css
必须确保它是 HTML 中第一个加载的 CSS 文件，且不能通过 @import 嵌套在其他样式里——否则规则会被后续样式覆盖，现象就是 h1 还有上下边距、ul 仍有圆点、button 保留灰色边框。
- 正确路径示例：
<link rel="stylesheet" href="/css/normalize.css">，放在最顶部 - 避免在 JS 入口文件中
import './normalize.css'——构建工具可能打乱 CSSOM 构建顺序 - 检查 DevTools → Elements → 任一元素 → Styles 面板，确认
margin、padding等属性来源是normalize.css且未被划掉
用了 normalize.css 还要手动补哪三处
normalize.css 本身不设 box-sizing、不约束 img 宽度、不统一表单控件字体，这三处漏掉会导致常见布局崩坏：
-
* { box-sizing: border-box }—— 必须加，否则width: 100%+padding会撑破容器 -
img { max-width: 100%; height: auto }—— 防止图片溢出父容器，尤其响应式场景 -
button, input, select, textarea { font: inherit }—— 否则它们可能沿用浏览器默认字体（如系统等宽字体），与正文割裂
normalize.css 和 reset.css 到底选哪个
除非你在做高度定制的营销页或设计系统原型，且团队能统一维护基础样式，否则优先选 normalize.css。它保留有用的默认值（如标题层级、列表缩进、pre 的空白处理），只修正已知跨浏览器 bug；而 reset.css（如 Eric Meyer 版）是“清零”，逼你从头定义每个元素，反而增加开发负担。
如果你用 Ant Design、Element Plus 这类组件库，normalize.css 更友好——它们内部依赖部分原生样式逻辑；对可访问性也更谨慎，不随意覆盖 outline 或 cursor 行为。
真正容易被忽略的是：即使用了 normalize.css，box-sizing 这一行不加，padding 就永远是盒模型里的“隐形炸弹”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
