在进行前端开发时，经常会遇到 CSS 样式兼容性问题，为了解决这些问题，我们可以采用 CSS Reset 或 Normalize.css 进行样式初始化。本文将从原理、实战应用、优缺点等方面介绍 CSS Reset 和 Normalize.css。
CSS Reset 和 Normalize.css 的原理
CSS Reset
CSS Reset 的核心思想是将 HTML 元素的默认样式全部清空，从而消除不同浏览器之间的差异，让我们从一个干净的状态出发。
例如，以下是一段简单的 CSS Reset 样式代码:
-- -------------------- ---- -------
----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-这段代码会将所有 HTML 元素的 margin、padding、border、outline、font-size 等样式全部清空，从而实现基本的样式初始化。
但是，CSS Reset 也存在一些问题：
一些 HTML 元素的默认样式也具有一定的意义，比如 a 标签的下划线，strong 标签的加粗等。CSS Reset 消除了这些默认样式，可能会对页面的无障碍性、语义化等造成不良影响。
CSS Reset 会大量使用通配符，导致样式污染、选择器优先级问题等问题。
Normalize.css
相对于 CSS Reset，Normalize.css 的目标是在不丢失有用默认值的情况下修复浏览器之间的样式差异。
Normalize.css 通过重新设置默认样式，填补了各种浏览器的样式差异，实现跨浏览器的一致性。同时，Normalize.css 保留了一些有用的默认值，比如 a 标签的下划线等。
例如，以下是一段简单的 Normalize.css 样式代码：
-- -------------------- ---- -------
---- -
------------ -----------
--------------------- -----
------------------------- -----
-
---- -
------- --
-
--------
------
--------
-----------
-------
-------
-------
-----
-----
----
--------
------- -
-------- ------
-可以看到，Normalize.css 解决了 CSS Reset 存在的问题，同时通过适度的默认样式保障了页面的无障碍性和语义化。
Normalize.css 的实战应用
要使用 Normalize.css，我们需要将它导入到项目中。可以通过 CDN 或 npm 安装使用。
通过 CDN 导入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-b7vBrGWBbW5rZ9/fZh5JrPLXi+OJuxAq3Jy+tkhozoA=" crossorigin="anonymous" />
通过 npm 导入：
npm install normalize.css --save
然后在项目中使用：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- ----- - ------------- -------------
----- ---------------- ------------------------------------------------------------------------------- --------------------------------------------------------------- ----------------------- --
-------
-- -------- --
--------
-------
------
---- ------- ---
-------
-------需要注意的是，Normalize.css 应该在所有其他样式表之前导入。这可以确保浏览器在应用其他样式之前正确地应用 Normalize.css。
总结
本文介绍了 CSS Reset 和 Normalize.css 的原理、实战应用以及优缺点。相比于 CSS Reset，Normalize.css 更加现代化，同时保留了一些有用的默认值，适合在具有一定规模的项目中使用。我们可以根据项目实际情况选择适合的样式初始化方案，提高开发效率，避免样式兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65431e587d4982a6ebcc6b96