什么是 CSS Reset？
在编写网页时，我们经常会遇到不同浏览器对样式的默认渲染不一致的问题，这不仅会影响页面的美观度，还会影响页面的布局和功能。CSS Reset 就是一种用于重置浏览器默认样式的技术，它的目的是让不同浏览器对网页的渲染结果尽可能的一致。
为什么要使用 CSS Reset？
在不同浏览器中，对于 HTML 标签和 CSS 属性的默认样式是不同的，这导致了在不同浏览器下页面的显示效果不一致。比如，不同浏览器对于 <h1> 标签的默认样式是不同的，有些浏览器会设置字体大小为 32px，有些浏览器会设置为 24px，而有些浏览器则会设置为 2em。这就导致了在不同浏览器下，同样的页面在视觉上的差异。
使用 CSS Reset 可以很好的解决这个问题，它会将不同浏览器对于 HTML 标签和 CSS 属性的默认样式全部重置为相同的值，从而让不同浏览器对于网页的渲染结果尽可能的一致。
常见的 CSS Reset 方案
Eric Meyer Reset
Eric Meyer Reset 是最早的 CSS Reset 方案之一，它通过重置所有 HTML 标签的默认样式，以及一些常见的 CSS 属性，来消除不同浏览器之间的差异。以下是 Eric Meyer Reset 的示例代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
Normalize.css
Normalize.css 是一种比较新的 CSS Reset 方案，它与 Eric Meyer Reset 不同的是，它并不是将所有 HTML 标签和 CSS 属性的默认样式全部重置为相同的值，而是通过保留有用的默认样式，来保证不同浏览器之间的一致性。Normalize.css 还修复了一些常见的浏览器的 bug，比如在 IE 中输入框的默认高度不一致的问题。以下是 Normalize.css 的示例代码：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- -------- ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ------ -------- ------ ----------- --- - ----------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ----- -- ------- -------- --- ------- -- -- --- -- --- -- --- -- -- - ------- -- - --- - ------ --- ------ -- ------ ----- -- ---- -- -- --- -- --- -- --- -- -- - ------- -- - --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ------ ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ------ ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ------- --- ------- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ---- -- -------- -- --------------- - -------- --- ------ ----------- - --- - ------ --- ---------- ----- ------- --- --- ------- ----- ------ -- ------- - -------- --- ------- -- ---------------- - ----------- ----- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - -------- ----- -
如何使用 CSS Reset？
使用 CSS Reset 很简单，只需要在网页的头部引入 CSS Reset 的样式文件即可。以下是一个使用 Eric Meyer Reset 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- -----------------
----- ---------------- -----------------
-------
------
----------- -- -- ------------
------- -- ---- ---------
-------
-------总结
CSS Reset 是一种用于重置浏览器默认样式的技术，它的目的是让不同浏览器对网页的渲染结果尽可能的一致。常见的 CSS Reset 方案有 Eric Meyer Reset 和 Normalize.css，使用 CSS Reset 很简单，只需要在网页的头部引入 CSS Reset 的样式文件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3e15c2b3ccec22fc4da4f