背景
在我们开发 Web 应用时，为了兼容不同的浏览器，我们通常会使用 CSS Reset 来统一不同浏览器的默认样式。CSS Reset 会将所有 HTML 元素的样式重置为一致的状态，这样我们就可以自己定义样式，而不必担心浏览器的默认样式会影响我们的设计。
然而，使用 CSS Reset 后，我们可能会发现页面的样式和排版出现了一些问题，比如字体大小不一致、行高不统一、按钮样式不一致等等。这是因为 CSS Reset 并没有提供完整的样式定义，而是将所有样式都重置为初始状态。因此，我们需要进一步定义样式，以满足我们的需求。
解决方案
1. 使用 Normalize.css
Normalize.css 是一款专门为 Web 开发者设计的 CSS 文件，它可以解决 CSS Reset 后出现的样式和排版问题。与 CSS Reset 不同的是，Normalize.css 并不是将所有样式都重置为初始状态，而是尽可能保留浏览器的默认样式，并为不同浏览器提供一致的样式定义。这样，我们可以在不同浏览器上获得一致的页面效果，同时又可以避免浏览器默认样式带来的问题。
使用 Normalize.css 很简单，我们只需要在 HTML 文件中引入 Normalize.css 文件即可：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
2. 自定义样式
如果我们不想使用 Normalize.css，或者需要进一步定制样式，我们可以自己定义样式。在定义样式时，我们需要注意以下几点：
1）使用相对单位
在定义字体大小、行高等样式时，我们应该使用相对单位，比如 em、rem、% 等。这样可以保证样式的相对一致性，而不受浏览器默认样式的影响。
2）使用通用样式
为了避免重复定义样式，我们可以使用通用样式来定义一些常用的样式，比如：
-- -------------------- ---- -------
-- ---- --
---------------- -
-------- ---
-------- ------
------ -----
-
-- ------ --
--------- -
-------------------- -----
----------------- -----
---------------- -----
------------ -----
-
-- ------ --
--- -- -
------- --
-------- --
----------- -----
-3）使用样式继承
为了简化样式定义，我们可以使用样式继承来定义样式。比如：
-- -------------------- ---- -------
-- ------ --
---- -
-------- -------------
-------- ---- ----
-------------- ------
----------------- --------
------ -----
---------------- -----
-
-- --------- --
------------ -
------- --- ----- --------
-
------------ -
------- --- ----- --------
----------------- --------
-
----------- -
------- --- ----- --------
----------------- --------
-
-- --------- --
------- -
---------- -------
-
------- -
---------- ------
-
-- ------ --
------------- -
-------- ---
--------------- -----
-在 HTML 中使用按钮时，我们只需要添加相应的 class 即可：
<a href="#" class="btn btn-primary btn-lg">Primary Button</a> <a href="#" class="btn btn-success btn-sm">Success Button</a> <a href="#" class="btn btn-danger btn-disabled">Disabled Button</a>
总结
使用 CSS Reset 可以帮助我们统一不同浏览器的默认样式，但也会带来一些样式和排版问题。为了解决这些问题，我们可以使用 Normalize.css 或自定义样式。在自定义样式时，我们需要注意使用相对单位、通用样式和样式继承，以提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650abd1f95b1f8cacd5186f9