在前端开发中，我们经常使用 CSS 进行页面的样式设计。但是不同浏览器对某些 HTML 元素的默认样式并不相同，这就导致了在不同浏览器上展示的页面效果也不同。要解决这个问题就要使用 CSS Reset。
CSS Reset 是什么？
CSS Reset 是一份包含常用样式的 CSS 文件，它的作用是将所有 HTML 元素的默认样式都清除或重置为相同的样式，以便开发者更容易地设计出符合自己需求的样式。
为什么要使用 CSS Reset？
解决浏览器样式不一致的问题 不同浏览器对默认样式的处理方式不同，这就导致了在不同浏览器上展示的页面效果也不同。使用 CSS Reset 可以解决这个问题。
降低开发难度 浏览器默认样式存在的意义是为了方便开发者开发页面，但是在实际的开发中，这些默认样式可能会制造一些问题。使用 CSS Reset 可以将所有元素的默认样式都清除或重置，这样可以降低开发难度。
提高网站性能 在网站加载过程中，浏览器会加载很多的默认样式文件，这会降低网站的性能。使用 CSS Reset 可以减小页面样式文件的体积，提高网站性能。
常用的 CSS Reset
目前比较常用的 CSS Reset 文件有以下几种：
- Eric Meyer Reset Eric Meyer Reset 是最早出现的 CSS Reset 文件之一，可以清除大多数平台的默认样式。
示例代码：
-- -------------------- ---- ------- -- ---- ----- --- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- --------- -- ----------- ----- ---------------- --------- ------------ ------------ -
- Normalize.css Normalize.css 是另一款比较受欢迎的 CSS Reset 文件，可以保留一些有用的默认样式，并修复了一些浏览器的兼容性问题。
示例代码：
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
--
--------
--------
--
---
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------------------- -----
--------------------- -----
----------------- -----
-
---
- -- ------ ------- -------
--
---- -
------- --
-
--
-------- -------
----------------
--
---
- -- --- --- ------- --- ------ -- --------
- -- ---- --- -------- -- ---- --- ---
--
-- -
----------- ------------
------- --
--------- --------
-怎么使用 CSS Reset？
使用 CSS Reset 很简单，只需要将 CSS Reset 文件引入到你的 HTML 文件中就好了。通常情况下，我们会在页面的头部引入 CSS Reset 文件，以便覆盖默认样式。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------- --- ------------- ------ ---------------- --------------------- ------ ---------------- --------------------- ------- ------ ---------- --- ----------- ----------------- --- -------------------- ---- ---------------------------------------------- --- ---------- ------- -------
总结
CSS Reset 可以帮助我们解决浏览器默认样式不一致的问题，降低开发难度，提高网站性能。目前比较常用的 CSS Reset 文件有 Eric Meyer Reset 和 Normalize.css，使用起来也很简单，只需要将 CSS Reset 文件引入到 HTML 文件中就好了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464db9c968c7c53b05b40c2