前言
在前端开发中，我们会发现不同浏览器在渲染相同的页面元素时，可能会出现不一致的情况。这是因为浏览器本身就拥有了一些默认的样式，导致页面在不同浏览器中呈现的效果不一样。为了解决这个问题，前端开发者通常会使用 normalize.css 或者 CSS Reset 进行样式统一。
normalize.css 与 CSS Reset
normalize.css 和 CSS Reset 都是用来消除浏览器默认样式的工具。它们的原理和核心思想相同，不同的是它们的实现方式不同。
- CSS Reset
CSS Reset 的原理非常简单，它将元素的默认样式全部清除掉，设置成开发者自己定制的初始样式。这种方式比较彻底，但是可能会导致开发时需要重新设置许多初始样式，比较烦琐。
示例代码：
/* css reset */
/* 清除默认样式 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
/* 设置初始样式 */
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#000;}- normalize.css
normalize.css 的实现方式是保留一部分浏览器默认样式，同时添加一些新的样式，以达到在不同浏览器中呈现相同的效果。这种方式比较灵活，但也可能导致有些样式无法达到完全统一。
示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>normalize.css</title>
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet felis vulputate risus bibendum, quis ullamcorper sapien tempor. Phasellus diam orci, euismod ut mattis in, mollis eu libero. Suspendisse bibendum sapien a volutpat tempor. Phasellus pretium, sem nec commodo dignissim, mauris mauris bibendum metus, non tempor quam mauris vel magna. Donec porttitor laoreet velit, a dictum nibh congue vel. Sed vitae tristique est. Quisque nec enim lectus. Duis sit amet euismod nisl. Aliquam elit velit, ornare a luctus nec, pulvinar eget sapien. Praesent ac bibendum nisl. Sed laoreet velit vel nunc pharetra, vitae vulputate enim eleifend.</p>
</body>
</html>适用场景
根据使用效果和实现方式，我们可以选择合适的工具来消除浏览器默认样式。
- CSS Reset
CSS Reset 适合那些希望彻底清除浏览器默认样式，并需要从头开始设定所有的初始样式的开发者。如果项目中对样式的要求非常苛刻且需要完全掌控每一个样式，那么可以使用 CSS Reset。
- normalize.css
normalize.css 更适合那些想要在不同浏览器中呈现类似的样式，并减轻工作量的开发者。如果项目不要求对每个样式都非常掌控，需要更快的样式实现以及更简明的开始方式，那么可以使用 normalize.css。
总结
normalize.css 和 CSS Reset 都是用来消除浏览器默认样式的工具。CSS Reset 直接清除元素的默认样式，需要重新设置初始样式；normalize.css 保留了一部分浏览器默认样式，并添加新的样式，更适合快速实现有统一性的样式。根据使用场景选择合适的工具可以帮助我们在开发中更快速高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540daf17d4982a6eba6cb65