前言
在前端开发中，我们会发现不同浏览器在渲染相同的页面元素时，可能会出现不一致的情况。这是因为浏览器本身就拥有了一些默认的样式，导致页面在不同浏览器中呈现的效果不一样。为了解决这个问题，前端开发者通常会使用 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 的实现方式是保留一部分浏览器默认样式，同时添加一些新的样式，以达到在不同浏览器中呈现相同的效果。这种方式比较灵活，但也可能导致有些样式无法达到完全统一。
示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------------- ----- ---------------- --------------------- ------- ------ ----------- ------ ----------- ------ -------- ----- ----- --- ----- ----------- ---------- ----- ----- --------- ----- --------- ----- --------- ---- ----------- ------ ------- --------- ---- ----- ------- -- ------ --- ------ -- ------- ----------- -------- ------ - -------- ------- --------- -------- --- --- ------- ---------- ------ ------ -------- ------ --- ------ ---- ------ --- ------ ----- --------- ------- ------ - ------ ---- ------ ---- --- ----- --------- ---- ------- --- ---- ------- ---- --- ---- ------- ----- ------- ---- ------ ------ - ------ ---- -------- ---- ------- -------- -- -------- ----- --- ------- ----- --- ---- --------- ----- --------- ---- ------------- ------- -------展开代码
适用场景
根据使用效果和实现方式，我们可以选择合适的工具来消除浏览器默认样式。
- 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
