reset.css 的作用是抹平不同浏览器默认样式差异，通过将 margin、padding 等重置为统一基线（如 0 或 inherit）提升样式可控性；现代项目更推荐 normalize.css 或框架内置 preflight。
reset.css 的实际作用是什么
它不是浏览器必需的，而是开发者用来抹平不同浏览器默认样式差异的工具。比如 margin、padding、font-size 在 Chrome 和 IE 里可能完全不同，reset.css 通过把所有元素的样式重置为统一基线（通常是 0 或 inherit），让后续 CSS 更可控。
不引入 reset.css 会出什么问题
常见表现包括：
- 同一段 HTML 在 Safari 和 Firefox 中首行缩进或列表项间距明显不一致
-
button或input元素在不同浏览器中高度、边框、背景色自动渲染不同 - 使用
em或rem做响应式时，根字体大小被浏览器默认body样式干扰
这些问题不一定立刻暴露，但会在跨浏览器测试阶段集中爆发，尤其当设计稿对像素级对齐有要求时。
现代项目中更推荐用什么替代 reset.css
多数新项目已转向 normalize.css 或 modern-normalize，它们不是暴力清零，而是保留有用的默认行为（比如 audio 的可播放样式、sub/sup 的垂直对齐），只修复已知渲染不一致点。
立即学习“前端免费学习笔记（深入）”；
如果你用的是 Tailwind CSS 或 UnoCSS 这类原子化方案，通常内置了 preflight（基于 normalize 的重置逻辑），此时再手动引入 reset.css 反而会导致样式冲突。
/* Tailwind 默认 preflight 包含类似这样的规则 */
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.5;
}什么时候可以跳过重置类文件
满足以下任一条件时，可不引入任何 reset/normalize：
- 项目只支持最新版 Chromium 内核（如仅运行在 Electron 或内部管理后台）
- 全站使用 CSS-in-JS（如 Emotion）且所有组件都显式声明了
box-sizing、margin、padding - 团队约定所有基础样式都从
:root和html层级开始定义，并严格审查每个元素的默认继承行为
但要注意：跳过不等于“没重置”，只是把重置逻辑分散到了你的自定义 CSS 里——漏写一个 *, *::before, *::after { box-sizing: border-box; }，后面就可能遇到 padding 撑破容器的问题。
