Eric Meyer 的 Reset.css 和 Normalize.css 因为其优秀的浏览器兼容性和样式复位效果，成为了很多前端开发者最常用的两个样式文件。然而，当我们需要在项目中使用它们的时候，需要如何选择并使用它们呢？本文将给大家带来一些综合使用方式的思路和实践。
了解 Reset.css 和 Normalize.css 的区别
首先，我们需要明确 Reset.css 和 Normalize.css 两个样式文件的区别和作用。
Reset.css（Eric Meyer's Reset）是对页面默认样式的完全清空，并重新定义了一套新的样式规则。它能使所有浏览器的表现一致，消除一些浏览器特有的样式，默认字体大小、行高等设置，让开发者能够更自由地控制样式。
而 Normalize.css 则是在保留默认样式的前提下，通过重新定义的方式去除浏览器的一些默认差异和bug。它主要是为了在不影响原生控件的情况下增强 CSS 样式的一致性，使得网站的外观更加美观，同时保证开发者可以快速地开发出具有良好可访问性的网站。
综合使用方式
既然 Reset.css 和 Normalize.css 在其使用方式上有差异，我们是否可以将它们结合在一起，达到既保留部分默认样式，又能在多个浏览器中得到一致的显示效果呢？下面，让我们看一下如何综合使用这两个样式文件，并摆脱可能出现的坑点。
- 引入 Normalize.css
由于 Normalize.css 保留了原生样式，在样式命名上与 Reset.css 有所不同，因此我们可以先引入 Normalize.css，保证页面要使用的元素在样式上已经得到了统一和增强。
<link rel="stylesheet" href="normalize.css">
- 在 Normalize.css 之后引入 Reset.css
在引入 Reset.css 文件的同时，需要注意文件引入的次序。由于 Reset.css 的作用是对原生样式进行重置，并对浏览器对于某些样式表现存在的差异进行修复，在其后面再引入 Normalize.css 就可以保证这些差异能被修复，并达到预期的样式效果。
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="normalize.css">
- 接着添加自定义样式
在以上两个样式文件被引入之后，我们就可以进行自定义样式的添加。需要注意的是，由于 Reset.css 清空了默认样式，因此我们需要从头开始定义所有样式；而在 Normalize.css 中，浏览器默认样式已经保留，因此在使用时需要更加小心并根据自己的需要进行样式调整和覆盖。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------- ------------
----- ---------------- --------------------- ---- -- ------------- ---
----- ---------------- ----------------- ---- -- --------- ---
-------
-- ------ ------ --
---- -
------------ ------ -----------
---------- -----
------------ ----
-
-- -
---------- -----
------------ -----
-
- -
------ --------
---------------- -----
-
- -
-------------- ----
-
--------
-------
------
----------------------- ---------
-----------
-- -------------- --------
-------
-------总结
Reset.css 和 Normalize.css 都是前端开发中非常实用的样式文件，它们各有优点，可以根据开发者的实际需求进行选择。在综合使用两个样式文件时，需要在引入顺序和自定义样式方面做好专业的规划，避免出现样式不一致或者样式冲突的问题。同时，参照示例代码，也可以对页面样式做出一些美化，让用户的浏览体验更加舒适和美好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ccd9195ad90b6d042d3aa1