在前端开发中，我们经常需要使用 CSS 来编写样式，往往要考虑不同浏览器的兼容性问题。在此背景下，我们需要使用一些工具来消除默认样式的影响，常见的两个工具是 CSS Reset 和 Normalize.css。本文将介绍它们的区别以及如何选择使用它们。
什么是 CSS Reset？
CSS Reset 是消除浏览器默认样式的一种方法。它通过重新定义所有 HTML 元素的样式，来达到统一浏览器默认样式的效果。CSS Reset 最早由 Eric Meyer 在 2000 年提出，其思路是将所有元素的样式都设为相同的值，然后再根据需要进行修改。
CSS Reset 的代码如下：
-- -------------------- ---- ------- -- --------- -- - - ------- -- -------- -- ------- -- ---------- ----- ------------ -------- --------------- --------- -展开代码
代码中采用了通配符（*）来选中所有元素，然后将它们的边距、内边距、边框、字体大小、字体和垂直对齐方式都设置为了默认值。
什么是 Normalize.css？
与 CSS Reset 不同，Normalize.css 旨在让浏览器在不同的平台上渲染相同的效果。它只是对默认的样式进行了优化，而不是完全消除它们。Normalize.css 是 Nicolas Gallagher 出品的一款 CSS 样式库，它可以让网页在各种浏览器和设备上呈现出一致的样式效果。
Normalize.css 的代码如下：
/* normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; }
代码中针对 HTML 元素和 body 元素做了一些基础的样式设置，如行高、字体大小调整等。与 CSS Reset 不同，Normalize.css 并不试图把所有元素的样式设为相同的值。
虽然 CSS Reset 和 Normalize.css 都可以消除浏览器默认样式，但它们的实现方式和效果是不同的。
差异一：目的不同
CSS Reset 的目的是消除所有元素的默认样式，这样开发者在编写样式时可以更容易地控制它们的外观和行为。而 Normalize.css 着眼于在各种浏览器和设备中创建一致的样式效果，它旨在处理浏览器之间的样式不一致问题。
差异二：样式定义的不同
CSS Reset 的方式是将所有元素的样式都设置为相同的值，而 Normalize.css 只是针对默认样式进行优化，而不是清除它们。Normalize.css 着眼于解决跨浏览器渲染的问题，它的规则集更有针对性，使得浏览器默认样式可以正常工作，并在需要的时候也可以轻松自定义。
差异三：复杂度和规模
CSS Reset 的代码并不复杂，在经过一些修改后，可以使网站呈现出相对一致的样式效果。但当开发者对浏览器样式进行了完全的清除后，就必须自己编写所有的样式，这增加了开发工作的复杂度。而 Normalize.css 的代码已经被广泛测试和使用，已经包括了大部分主流浏览器的样式，而且体积较小，使用便捷。
如何选择使用 CSS Reset 还是 Normalize.css？
- 当需要更大的样式自由度时，使用 CSS Reset；
- 当需要在不同浏览器上达到样式的一致性时，使用 Normalize.css；
- 当想要快速的开发项目时，使用 Normalize.css。
示例代码
在下面的示例中，我们使用两种方式来实现一个简单的按钮样式。首先，我们使用 CSS Reset 来消除默认外观和行为。然后，我们使用 Normalize.css 来统一不同浏览器上的默认行为。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----- - ------------- ----------- ------ ---------------- -- -- --- ----- -- ------ - ----------------- ------------ ------- ----- ------- -------- ------------ ------ ----------- ---------- ----- -------- ----- -------- ---- ----- ----------- ------- ---------------- ----- ----------- ---------------- ----- - ------------ - ----------------- ----- - -------- ----- ---------------- --------------- --------------------- ------- ------ ------------------- ------- -------展开代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----- - ------------- ----------- ------ ---------------- -- -- ------------- -- ------ - ------------ -------- ---------- ----- ------------ ----- ------- -- - -------- ----- ---------------- --------------- --------------------- ------- ------ ------------------- ------- -------展开代码
在上述示例代码中，我们分别使用了 CSS Reset 和 Normalize.css，实现了相同的按钮样式。在 CSS Reset 中，我们首先消除了所有的默认样式，并通过 CSS 代码来重新定义了按钮的样式。而在 Normalize.css 中，我们只对按钮所在的父元素（即 body）做了基础样式设置，来消除浏览器之间的差异。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca99c6e46428fe9e2ecc87
