不能直接用 * { margin: 0; padding: 0 } 重置样式，因其破坏语义化渲染（如 textarea 垂直对齐、button 热区、标题层级）、削弱可访问性，且不解决浏览器间 font-size、line-height 等根本差异；应优先保留合理默认，再针对性调整。
为什么不能直接用 * { margin: 0; padding: 0 } 重置样式
这种“暴力清零”看似简单，实则破坏浏览器默认语义化渲染逻辑。比如 textarea 会失去原生垂直对齐，button 和 input 的内边距归零后点击热区严重缩水，h1~h6 全部变一样大，可访问性（如屏幕阅读器依赖的层级结构）也被削弱。
更关键的是：它不解决根本问题——不同浏览器对同一元素的默认 font-size、line-height、border 渲染差异依然存在。
- 不要手动写全局通配符重置
- 避免覆盖表单控件、表格、列表等有强语义的默认行为
- 优先让浏览器“保持合理默认”，再针对性调整，而非“全部打平再重建”
Normalize.css 和 Reset.css 的核心区别在哪
Normalize.css 不是清空样式，而是修复差异：保留有用的默认值（如标题层级、列表缩进、表单控件尺寸），仅修正已知的跨浏览器不一致点；Reset.css（如 Eric Meyer 版）则是彻底抹除所有默认样式，逼你从零定义每个元素。
现代项目基本选 Normalize.css，因为：
立即学习“前端免费学习笔记（深入）”；
- 它保留了
em、strong等语义标签的默认加粗/倾斜效果 - 修复了移动端
click延迟、input[type="search"]的圆角和清除按钮兼容性 - 对 Flex/Grid 容器的默认
min-width行为做了统一（老版 IE 会自动设为auto，导致布局错乱）
如何正确引入 Normalize.css 到项目中
必须确保它在你自定义 CSS 之前加载，否则你的规则会被它的“修复”覆盖。常见错误是把它放在 main.css 后面，或通过 @import 在文件末尾引入。
推荐方式：
- 用 npm 安装：
npm install normalize.css，然后在入口 CSS 或 JS 中@import 'normalize.css';（注意路径） - CDN 引入时，放在
内所有自定义样式<link>标签之前 - 如果用 PostCSS，可用
postcss-normalize插件，在构建时自动注入，避免额外 HTTP 请求
别删它里面的注释——那些说明了每条规则针对哪个浏览器 bug，排查时很有用。
Normalize.css 之后还该做什么
它只解决“浏览器之间怎么不一样”，不解决“我们自己怎么保持一致”。所以紧接着必须做三件事：
- 定义一套基础
html和body的字体、行高、颜色变量，比如:root { --font-base: 16px; --line-height-base: 1.5; } - 用
box-sizing: border-box全局覆盖（Normalize.css不包含这个，需自己加） - 为
img、svg、iframe等替换元素设置max-width: 100%和height: auto，防止溢出容器
这些不是 Normalize 的职责，但漏掉任何一个，都会让你在后续开发中反复踩坑——比如图片撑破卡片、弹性盒子内文字换行异常、或者调试时发现某处 padding 总是多出 2px 却找不到源头。
