在前端开发中，为了保证在不同的浏览器中展示一致性的页面，我们常常需要使用 CSS Reset 或 normalize.css 进行基础样式的重置或者规范化。这两种方法在实现方式和效果上有所不同，下面就让我们来比较一下它们的区别，并且探究哪一种方法更好一些。
1. CSS Reset
CSS Reset 的主要思想是先将浏览器默认样式全部清除，然后在样式文件中重新定义所有元素的基础样式。这样做的目的是希望能够消除浏览器样式表差异，从而确保不同浏览器呈现出一致的样式效果。下面是一个简单的 CSS Reset 的示例代码：
// javascriptcn.com 代码示例
/* reset.css */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
ol,
li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Add some utility classes for convenience */
.hide {
display: none !important;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}在上述代码中，我们清除了所有元素的默认 margin, padding 和 border，同时将 font-size 设置为 100%，使用 font: inherit 继承父元素的字体，以及设置 vertical-align: baseline 等。需要注意的是，使用 CSS Reset 时要谨慎，因为它往往会影响到网站的整体样式和布局，有可能导致意外的效果。
2. normalize.css
normalize.css 的主要思想是保留了浏览器原有的一些默认样式，同时修复一些常见的浏览器兼容性问题，以及提高可用性和体验。相较于 CSS Reset 而言，normalize.css 更注重浏览器样式表的统一性，以及准确的一些默认样式的表现方式。下面是一个 normalize.css 文件的示例代码：
// javascriptcn.com 代码示例
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 1 */
border-top: 1px solid; /* 1 */
}
/* Text-level semantics
========================================================================== */
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Add the correct font size in all browsers.
* 2. Improve font inheritance in Safari.
*/
code,
kbd,
samp,
pre {
font-size: 1em; /* 1 */
font-family: monospace, monospace; /* 2 */
}在上述代码中，我们可以看到 normalize.css 的目标是尽可能地确保所有浏览器和平台中的元素呈现出相同的基础样式，但是又不影响开发者自定义样式。normalize.css 实现的基础样式是非常细致且精确的。
3. 对比分析
CSS Reset 和 normalize.css 的目的都是为了解决浏览器样式表差异问题，并且在某些情况下可以更好的实现界面定制。但是二者实现的方式却是相当不同的，主要的区别在于：
- CSS Reset：先清除掉全部的样式，然后手动设置每个元素的样式，实现最大程度的可定制性；
- normalize.css：保留默认样式，并对一些常见的浏览器兼容性问题进行调整，以及提高可用性和体验，实现更好的浏览器兼容性。
选择使用哪一种方案，要考虑到我们的需求和目标。如果我们希望更加自由地定制 web 网站和应用程序，并且能够灵活地控制所有 HTML 元素的样式，那么 CSS Reset 可能会是更好的选择。但是如果我们只想要解决一些常见的浏览器兼容性问题，并且希望让网站的基础样式更加统一，那么 normalize.css 可能更加适合。
4. 总结
CSS Reset 和 normalize.css 在前端开发中都有其自身的特点和优点，使用时需要根据自身需求进行选择。选择合适的方案可以帮助我们解决浏览器样式表差异问题，提高网站的兼容性，并且更好地实现自己想要的样式效果。
最后，还是推荐使用 normalize.css ，对于想要准确而又方便的样式，normalize.css 是一款非常好的选择，因为它保留了默认样式，同时修复了一些常见的浏览器兼容性问题，提高可用性和体验。即便我们需要制作一个全新的 UI ，normalize.css 也可以帮助我们大幅度减少代码的编写量，缩短产品上线的时间。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654dede67d4982a6eb749d64