在前端开发中，CSS 样式是非常关键的一部分。不同浏览器对样式的支持也存在着一些差异，为了解决这些差异，我们通常需要用到重置或者 Normalize.css 来统一浏览器之间的样式。那么，CSS Reset 与 Normalize.css 到底有什么不同呢？又该如何选择并使用它们呢？
CSS Reset 与 Normalize.css 的区别
CSS Reset 是一种将浏览器的默认样式全部重置为相同值或者删除默认样式的方法。使用 CSS Reset 可以消除浏览器在默认设置上的差异，对页面的样式更加精确的控制，但是这需要非常注意。
Normalize.css 是一个流行的 CSS Reset 库，与 CSS Reset 最大的不同是它不是将所有元素的样式重置为相同的值，而是为您提供了一个功能丰富且经过考虑的排版基础。Normalize.css 可以让您在各种浏览器中获得更加一致的样式，使得浏览器表现更标准化。这样有一个好处，开发者在开发过程中可以专注于自己的样式而不用过多考虑浏览器兼容。
如何选择并使用
首先，我们需要明确，重设样式是为了解决不必要的差异，不是为了和默认样式不一样而采取的变态做法。
在使用 CSS Reset 时，需要注意一些问题，比如重设后，所有的样式都需要手动设置。如果你用错样式，会在测试时出现一些莫名其妙的问题。
通过使用 Normalize.css，您可以大大减少您需要自己定义的样式数量，同时保证了在所有浏览器中的样式表现方式一致。
一般情况下，我们建议使用 Normalize.css。在 CSS Reset 中，如果对每一个默认的样式都非常了解，也可以自己编写。
应用推荐
下面是一个 Normalize.css 的示例代码：
-- -------------------- ---- ------- -- --------- ---- -------- ----- -- ------- ------------------------------------------------------------- -- ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- --------- -------- -- ------- -------- --- ------ -- -- - ---------- ---- ------- ------ -- - -- ------ --- ------ -- --- -------- ------------- -- ---- - ------- -- - -- --- --- ------- ------- -- ------- -------- --- ------ -- ------- - -------- ---------- - -- ------ --- ------ -- ------ ------ ----- -- -- --- -- - --- - ------------- ----- - -- ----- --- ------ ---- ------------- --------- ------------ -- - - ----------- ----------- -
总结
CSS Reset 和 Normalize.css 都是解决浏览器样式差异的两种方式，但是 Normalize.css 出现之后，越来越多的开发者选择使用 Normalize.css，因为它提供了更丰富的排版基础。我们也应该注重学习 Normalize.css 的使用方法，并合理运用到我们的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1976bb5eee0b5258d208d