在开发前端网页时，我们会发现在不同浏览器上，同样的 CSS 样式可能会因为浏览器的不同实现，而导致页面呈现的不一致。为了解决这个问题，有人提出了 Reset CSS 的概念。Reset CSS 是把所有页面元素的默认样式都清除掉，从而保证在不同浏览器上呈现出一致的页面效果。
但是，Reset CSS 的问题在于它会清除掉元素的很多有用的默认样式。这样的话，我们就得想办法给这些元素重新设置默认样式，才能让它们呈现出我们希望的效果。
这时，就需要使用 normalize.css。Normalize.css 是一个帮助开发者在默认样式上建立更合理的样式规范的库。与 Reset CSS 不同的是，Normalize.css 不是简单的重置，而是遵循一些主观的规范，尽可能使得各种元素的默认样式在不同浏览器之间的表现更趋近于一致。同时，Normalize.css 还保留了很多有用的元素默认样式，从而避免了需要手动设置默认样式的繁琐工作。
下面，我们来用一个具体的示例来演示 Normalize.css 和 Reset CSS 的差异。假设我们有以下 HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- -------- ---- - --------- ---- --- --- - ------------- ----- --- --------- ------- ------ ---------- ---------- -------- -- -- ------------ ------- -------
现在，我们来比较使用 Reset CSS 和 Normalize.css 后的效果。
使用 Reset CSS
我们用以下 Reset CSS 代码来重置上面的页面：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- ----------- ----- ------------- ------- ---------------- --------- -
我们用上面的 Reset CSS 代码后，得到的效果是：
我们发现，页面的标题字体变小了，颜色也变成了黑色，段落也失去了原本的字体大小。这就是 Reset CSS 的问题所在，它会将所有页面元素的默认样式都清除掉，我们必须手动给每个元素设置默认样式，否则页面就会出现不一致的效果。
使用 Normalize.css
现在，我们来使用 Normalize.css 来修改上面的页面，代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------ ---------------- ---------------------------------------------------------------------- -------- ---- - --------- ---- --- --- - ------------- ----- --- --------- ------- ------ ---------- ---------- -------- -- -- ------------ ------- -------
我们用 Normalize.css 后，得到的效果是：
我们可以看到，标题字体大小、颜色，段落字体大小以及其他元素的一些默认样式都恢复了。这就是 Normalize.css 的好处所在，它建立了一些合理的样式规范，同时保留了许多有用的元素默认样式，避免了必须手动设置默认样式的繁琐工作。
总结
在开发前端网页时，我们经常会遇到不同浏览器上呈现不一致的问题。为了解决这个问题，我们可以使用 Reset CSS 或 Normalize.css。Reset CSS 是把所有页面元素的默认样式都清除掉，从而保证在不同浏览器上呈现出一致的页面效果。但是，它会清除掉大量有用的元素默认样式，需要手动设置默认样式。Normalize.css 是在 Reset CSS 基础上建立更合理的样式规范，同时保留了许多有用的元素默认样式，避免了必须手动设置默认样式的繁琐工作。
使用 Reset CSS 或 Normalize.css，可以将前端开发工作变得更加高效和简单。希望以上内容有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aaec348841e98948c8f4e