在前端开发过程中，我们会发现浏览器对于 CSS 的样式默认设定并不一致，这就导致了网页在不同浏览器下的样式效果可能会有所偏差。为了解决这个问题，我们需要使用 CSS Reset 来规范化不同浏览器默认样式的差异。
什么是 CSS Reset？
CSS Reset 是一种标准化样式表，它的作用就是将不同浏览器的默认样式清除或重置，以达到网页在不同浏览器下具有更加一致的效果。
为什么需要 CSS Reset？
标准的 CSS Reset 有如下好处：
- 将不同浏览器的默认样式统一，达到一致的表现效果；
- 减少浏览器内置样式造成的影响，提高网页的样式效率；
- 避免过多使用浏览器样式和标签等带来的样式不必要的影响。
- 比较适合需要快速开发、样式统一的大型项目。
标准版 CSS Reset
下面是一个标准版的 CSS Reset，我们可以将其添加到全局样式表中，以达到清除默认样式的目的：
-- -------------------- ---- -------
----------------------------------------
-----------------------------------
-------------------------------------
---------------------------------
-----------------------------------
-------------
------------------
---------------------------
---------------------------------------- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
----- -
----------- -----
-
----------- - -
------- -----
-
-- -------- -- ------ ----- ------- --
------ -
-------- --
-
-- -------- -- --------- ------- -------- --
--- -
---------------- -----
-
--- -
---------------- -------------
-
-- ------ ----- ---- ----------------- -- --- ------ --
----- -
---------------- ---------
--------------- --
-解析标准版 CSS Reset
*选择器* { margin: 0; padding: 0; }*选择器匹配所有元素，对其进行 margin 和 padding 定义为 0，是最常用的重置样式方式。盒子模型
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -对于盒子模型的一些重要属性进行了清除或赋值，例如 margin、padding、border、outline、vertical-align，以使元素在不同浏览器下样式保持一致。
列表样式
ol, ul { list-style: none; }清除默认样式的列表样式，控制网页载入时的无序列表和有序列表的表现。
引用样式
blockquote, q { quotes: none; }清除引用样式（在浏览器中显示为一对引号的样式），避免样式干扰。
超文本链接
a { text-decoration: none; color: inherit; }行内文本的链接样式（"text-decoration"）进行清除，显示为普通文本链接。
表格
table { border-collapse: collapse; border-spacing: 0; }清除表格边距样式的差异，并统一表格边框的展现效果。
总结
本文讲解了 CSS Reset 的作用、使用方法以及标准的 CSS Reset 文件，重点阐述了标准版 CSS Reset 中各个部分的含义和清除样式的目的，读完后相信你对 CSS Reset 完全掌握了，正确使用和修改它将有助于你开发出更加规范化的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648949a848841e9894794531