什么是CSS Reset？
CSS Reset 是一种用于在不同浏览器之间创建一致性的 CSS 技巧。简单地说，它会消除浏览器的默认样式，从而使您的样式更具“可预测性”。
为什么使用CSS Reset？
不同的浏览器在解释 CSS 的方式上存在差异，这可能导致页面在不同浏览器中显示不一致。为了规范化这些差异并使页面在不同浏览器中更具一致性，我们可以使用 CSS Reset。
例如，不同浏览器可能会对文本和列表的默认样式进行不同的解释。下面是一个示例，展示了一个未使用 CSS Reset 的页面在不同浏览器中的显示：
可以看到，不同浏览器对文本和列表的解释是不同的，这使页面显示的不一致。
常见的CSS Reset
这里介绍两种常见的CSS Reset：
Normalize.css
Normalize.css 是一种通过按照现代化的 HTML 元素默认样式（比如 button 的 padding，从而保留有益的值而不是完全重置它们）的方式来重置元素样式的方法。您可以在此处下载 Normalize.css 。
Meyerweb Reset
Meyerweb Reset 是一个轻量级的 CSS Reset，主要用于清除浏览器默认样式的影响。您可以在下面的 CodePen 中查看 Meyerweb Reset 的示例代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
如何使用CSS Reset？
在使用 CSS Reset 时，通常会将其写在所有其他 CSS 样式之前。这样，我们可以确保在覆盖默认样式之前，我们已将其清除。
总结
CSS Reset 是一种使不同浏览器之间元素样式更具一致性的技术。它可以帮助规范不同浏览器之间的默认样式差异，从而使网站在所有浏览器中显示一致。在实践中，您可以选择使用 Normalize.css 或 Meyerweb Reset 等常见的 CSS Reset 方法，但在使用它们时，请确保将其写在所有其他样式之前。
示例代码
以下是在使用 Meyerweb Reset 的情况下，创建一个基本网页框架的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ---------------
----- ---------------- --------------------------
-------
------
--------
------ ------------
---------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
----------- ------
-------- ----- ----- --- ----- ----------- ---------- ----- ---------- -------- ----- --- -- ------- --------- ---- -- ------ ------ ------ -------- ---- --- ---- ---- --------- - ------- ----- -------- ----
----------
---------
----------- ------
-------- -------- ----- -- ----- -------- ---- ----- --------- ------ ---- ------ ----- ----- -- ------ ----- ------- ---- ---- ------- --------- ---- ----- -------- ------ -- ----------- ---- ------ -- ---------
----------
--------
--------- ---- -- -----------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b5058968c7c53b0aad09a