在前端开发过程中，常常遭遇浏览器之间样式差异的问题。这是因为不同浏览器的默认样式表不同，而这些默认样式表会影响我们的页面布局和样式。
为了解决这个问题，CSS Reset 是一种很好的解决方案。 CSS Reset 可以重置浏览器的默认样式表，让我们自己定义的样式更准确地表达出来。
Mark Otto 是 Bootstrap 的创始人之一，他开发了一份 CSS Reset，被称为 Mark Otto 版的 CSS Reset。在这篇文章中，我们将初步掌握这份 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一份 CSS 代码，在页面加载时覆盖浏览器的默认样式表。通常，这份 CSS Reset 包含许多“重置”和“规范化”行为，以确保不同浏览器的默认样式表产生的影响尽可能小。
通常， CSS Reset 会包含许多一般的重置行为，例如：
body,
ol,
ul {
margin: 0;
padding: 0;
}这里我们使用了 CSS 的通配符 *，意为“所有元素”。换句话说，在这里我们重置了所有元素的 margin 和 padding。这个重置也可以针对特定的元素进行，例如：
-- -------------------- ---- ------- ------- ------ --------- ------- -------- - ------------ -------- ---------- ----- ------------ ----- ------- -- -
这里我们把所有输入元素的字体大小调整为 100%，取消了它们的 margin，使它们之间的距离更为统一。
Mark Otto 版的 CSS Reset
Mark Otto 版的 CSS Reset 是一份被广泛用于 Bootstrap 框架和其他前端项目的 CSS Reset。它与一般的 CSS Reset 不同之处在于，它把更多的重点放在了 HTML5 元素和 WAI-ARIA 角色的辅助属性上。
HTML5 有一些新的元素，例如 <section>、<article>、<nav>、<header> 和 <footer>，它们与旧的元素比较不同，具有一些新的默认样式，包括 margin 和 padding。 Mark Otto 版的 CSS Reset 取消了这些元素的默认样式，从而避免它们导致的影响。
在 HTML5 中，还有 WAI-ARIA 角色的辅助属性。这些角色可以让辅助工具(如屏幕阅读器)更好地理解页面。例如，我们可以为我们的页面定义一个“导航”区域：
<nav role="navigation"> ... </nav>
这里的 role="navigation" 存在于 HTML5 规范中，它为 nav 元素定义了一个被辅助工具理解的角色。 Mark Otto 版的 CSS Reset 对这些角色进行了一些重置，以确保它们的 styling 符合我们的预期。
这是一份典型的 Mark Otto 版的 CSS Reset：
-- -------------------- ---- -------
--
- ---- ----
- --------- ------
- ---------------------------------------------------
--
-- --------
-
- -- ------ --- ------- ---- ------ --- ----- -- ----- ---- ------------
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
- -- ------ --- ------ -- --- ---------
--
---- -
------------ -----------
------------ ----- -- - --
------------------------- ----- -- - --
--------------------- ----- -- - --
------------------- ---------- -- - --
---------------------------- ------------
-
--
- ------ --- ---- ---------- -- ------ ----- -- -- ---
--
- -
----------------- ------------
-
--
- ------- ----------- ---- ------- --- ---- ----- ------- -- --- ---------
--
---------
------- -
-------------- --
-
--
- ------- --------- ------------- ------- ------ --- ----- ---------
--
------- -
-------- ---- -------
-
--
- ------- ----------- --- ----------- -- ------------- ---- -- --- ---------
--
--- -
------------ ---------- ---------- -- - --
---------- ---- -- - --
-
-- -----
-
- -- ------ --- ------- ---- ------ --- ---------- ----- -- ----- ---- ------------
- -- ------- --- ---- -------- -- ---- --- ---
- -- ------- --- ----- ----------- ---- ---------- -------- -- ---
- -- ------ --- ----------- -- ---- --------- -- ---- --- --------
- -- ------ --- ----- ------- -- ------ --- ------ -- ------
--
------
-------
-------
---------
-------- -
------------ ----------- -- - --
---------- ----- -- - --
------------ ----- -- - --
------ -------- -- - --
-------- -- -- - --
------- -- -- - --
----------------- ------------
----------- -----------
-------------- --
------------------- -----
---------------- -----
----------- -----
-
-- ------ --- ----- ------ --- ------- -- -------- --
-------------------------
----------------------- -
------- --
-------- --
-
-- ------- ------- -- ------- ------------- -- ------- ----- ------------ -- --- -- ----------- --
----- -
------------ -------
-
-- --------
-
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
- -- ------ ---- ---------- -- --------- -- -------
--
-------- -
--------- ----- -- - --
------------ -------- -- - --
---------- -------- -- - --
------------ -------- -- - --
-这份 Reset 涵盖了许多常见元素和情况。例如，它处理了 <html> 元素的文字调整问题，以及输入元素的 background-color 和 border-radius 等。
结论
Mark Otto 版的 CSS Reset 是一份被广泛采用的 CSS Reset。它会确保浏览器的默认样式不会影响我们的页面布局和样式。
本文介绍了 Mark Otto 版的 CSS Reset 的一些重要方面和代码示例。我们希望读者能够对 CSS Reset 有更深入的了解，并在实际项目中应用它，解决样式兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67221d782e7021665e0a5c9b