在进行前端开发时，CSS的重置和标准化是必不可少的步骤。CSS Reset和normalize.css是两种常用的工具，它们可以解决不同浏览器之间的兼容问题，规范网页元素的默认样式。然而，两者的实现方法和效果有不同之处，下面我们来详细比较一下它们的异同点。
什么是CSS Reset
CSS Reset指的是在编写CSS之前，通过复写网页元素的默认样式，使其在各个浏览器上的表现更加统一。具体来说，就是清楚掉浏览器默认的margin、padding、font-size等样式属性值，确保元素有一个可预测的、标准的起点，从而在之后的布局中避免兼容性问题。
CSS Reset的优点是兼容性好、清晰易懂，而缺点是在样式表中会出现大量的样式重置代码，造成代码量增加、维护成本高等问题。
什么是normalize.css
normalize.css是一种CSS文件，它将HTML元素的styles设置为符合现代标准的样式（基于浏览器）。这个样式表的作用是让各种浏览器的员外表现更加一致化和规范化，从而避免各种浏览器之间的差异。同时，它也做了一些针对HTML5元素的样式设置。
normalize.css的优点在于其可以解决一些常见的问题，比如line-height、font-weight在某些浏览器上的不可预知行为。它也可以减少开发者在设计页面时所要考虑的关于不同浏览器间不同的表现。同时，normalize.css也不会覆盖掉所有元素的默认值，因此样式定义得比CSS Reset稍微宽松一些，具有更好的灵活性。
然而，normalize.css的缺点也是很明显的。与CSS Reset不同，normalize.css没有清除所有的默认样式，因此页面仍然可能存在兼容性问题和样式冲突。为了解决这个问题，开发者通常需要在normalize.css的基础上再添加自定义的CSS代码，使得页面符合自己的仔细需求。
CSS Reset和normalize.css是如何比较的
CSS Reset和normalize.css最大的区别在于它们的目的不同。CSS Reset通过重置所有默认样式，将所有元素的样式统一到一个起点，确保元素的兼容性。而normalize.css则试图将默认样式规范化，在这个过程中不会丢失元素的原始样式，这使得它更加灵活。当然，normalize.css并不能解决所有兼容性问题，但至少减少了多达80％的兼容性问题。
使用哪种方式取决于项目的需求和个人口味。如果你擅长撰写代码，那么CSS Reset可能更适合你。如果你更喜欢少打一些代码和可维护性更强的代码，那么normalize.css可能是更好的选择。
示范代码
CSS Reset示范代码
// javascriptcn.com 代码示例
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html,body{
height:100%;
}normalize.css示范代码
可以通过normalize.css官网下载。
总结
CSS Reset和normalize.css虽然看起来似乎都很相似，但在实际中有很大的差异。在选择使用哪个时，应该首先考虑自己项目的需求和个人口味。当然，在实践中，开发者也可以将两种方法结合起来使用，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654ad3537d4982a6eb4d502e