在前端开发中，我们经常会遇到一些样式问题，比如不同浏览器对同一标签的默认样式不同，或者同一浏览器不同版本之间的样式差异等等。为了解决这些问题，我们需要使用 CSS Reset 或 Normalize.css 进行样式重置或标准化。本文将介绍这两种方案的区别和选择。
CSS Reset
CSS Reset 是一种样式重置方案，它的思想是将所有 HTML 元素的默认样式都清除掉，从而避免浏览器的默认样式对页面样式的影响。常见的 CSS Reset 方案有 Eric Meyer 的 Reset CSS 和 YUI Library 的 Reset CSS 等。
下面是 Eric Meyer 的 Reset CSS 示例代码：
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-可以看到，这个 Reset CSS 将所有 HTML 元素的 margin、padding、border、outline 等属性都设置为 0，同时将 font-size 设置为 100%，这样可以避免浏览器对这些属性的默认样式对页面样式的影响。
Normalize.css
Normalize.css 是一种样式标准化方案，它的思想是在保留有用的浏览器默认样式的同时，修复浏览器之间的差异和 bug，使得页面在不同浏览器和设备上都能以一致的方式呈现。Normalize.css 的作者是 Nicolas Gallagher 和 Jonathan Neal。
下面是 Normalize.css 示例代码：
--- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- -
可以看到，Normalize.css 保留了一些有用的浏览器默认样式，并修复了一些浏览器之间的差异和 bug，比如修复了 IE 中 main 元素的样式问题，修复了 Chrome、Firefox 和 Safari 中 h1 元素的样式问题等等。
区别和选择
CSS Reset 和 Normalize.css 最大的区别在于它们的思想不同。CSS Reset 是一种样式重置方案，它的思想是将所有 HTML 元素的默认样式都清除掉，从而避免浏览器的默认样式对页面样式的影响。而 Normalize.css 则是一种样式标准化方案，它的思想是在保留有用的浏览器默认样式的同时，修复浏览器之间的差异和 bug，使得页面在不同浏览器和设备上都能以一致的方式呈现。
因此，选择哪种方案要根据具体情况而定。如果你想完全掌控页面样式，避免浏览器的默认样式对页面样式的影响，那么可以选择 CSS Reset。如果你希望页面在不同浏览器和设备上都能以一致的方式呈现，并且不想完全重置浏览器的默认样式，那么可以选择 Normalize.css。
另外，需要注意的是，Normalize.css 会保留一些浏览器的默认样式，因此需要在样式编写时考虑到这些默认样式的影响，避免出现意想不到的样式问题。
总结
CSS Reset 和 Normalize.css 是两种常见的样式重置和标准化方案，它们的思想和作用不同。选择哪种方案要根据具体情况而定，需要考虑到页面样式和浏览器兼容性等方面的因素。在使用 Normalize.css 时需要注意保留的浏览器默认样式的影响，避免出现意想不到的样式问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d7f83a1886fbafa45ac347