介绍
为了达到跨平台、跨浏览器、一致性等目的，我们通常会在项目中使用一些 CSS Reset 或 Normalize 样式。两者都是开源的 CSS 基础文件，可帮助我们减少跨浏览器样式差异的问题。
reset.css
reset.css 是最早的 CSS Reset 文件之一，它通过移除所有元素的内置样式以达到减少浏览器样式差异的目的。虽然 reset.css 很好地解决了该问题，但它的方法是过于暴力。例如，它会将所有元素的内边距和外边距重置为 0，会将所有字体大小重置为相同的大小。这意味着，如果您在使用 reset.css 时，您要重新定义所有元素的样式，而且您需要自己考虑浏览器的默认值，因为 reset.css 可能无意间破坏了一些浏览器的默认样式。
normalize.css
normalize.css 是对 reset.css 的升级版，它更加友好和现代化。相比 reset.css，normalize.css 试图让浏览器尽可能地按照标准样式表现，即在不破坏浏览器默认样式的前提下，保证元素的浏览器差异不大。normalize.css 还包含了一些额外的样式帮助我们解决常见需求，例如解决表单元素的一些浏览器差异。
如何使用
很简单，只需要将 reset.css 或 normalize.css 引入到项目的样式表中即可：
----- ---------------- ----------------- ---- -- --- ----- ---------------- ---------------------
您还可以在项目中自定义需要的样式，只需要在 reset.css 或 normalize.css 引入之后写上您的自定义 CSS 样式即可。
例子
下面是一些使用 reset.css 和 normalize.css 的例子：
reset.css 例子
--------- -----
----- ----------
------
----- ----------------
---------------- ---------------
----- ---------------- -----------------
-------
------
--------- -----------
------- -- - --------------
-------
-------normalize.css 例子
--------- -----
----- ----------
------
----- ----------------
-------------------- ---------------
----- ---------------- ---------------------
-------
------
--------- -----------
------- -- - --------------
-------
-------结论
虽然 reset.css 和 normalize.css 都可以帮助我们达到减少浏览器样式差异的目的，但二者的方法和效果并不相同。一般来说，我们更推荐使用 normalize.css，因为它更加现代化和友好。但是，如果您需要在一些偏古老的浏览器中使用，可能需要使用 reset.css。
无论您选择使用哪一个，只要您正确地用它们，都能帮助您在前端开发中避免一些样式差异问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710d5d5ad1e889fe2fc4ccc