在前端开发中，CSS 的 Reset 和 Normalize 是常用的技术手段，在开发过程中它们是用来重置浏览器的默认样式的。但是，虽然这两种技术最终目的相同，但它们的实现思路和使用方式却存在一定的区别。本文将重点介绍 CSS Reset 和 normalize.css 的区别，以及它们的使用方法。
一、 CSS Reset
CSS Reset 通常是指一组预定义的 CSS 属性，用于清除浏览器的默认样式。通常 Reset 文件中的规则是针对各大主流浏览器的样式表进行了大量的修改，以便让设计师和开发者能够从不同浏览器的不同样式中解放出来，更方便地进行样式处理。
下面为一个简单的 CSS Reset：
----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - -- ----- -- ---- --- ----- -------- ----- ---- - ------------ ------ ----------- ------ ----- ------- ----- ------ ----- -
可以通过观察上面的代码，我们会发现它的所有样式都是向零重置，这意味着我们需要自己定制每一个 HTML 元素的样式。这种零基础的样式表可以让我们有更大的灵活性，并且可以为基于框架的设计提供更好的工作思路。
二、 normalize.css
而 Normalize.css 则是一种不同的技术。它地址做的不仅仅是“reset”，它想着重解决的是浏览器之间的样式自动修正问题。例如：Normalize.css 会默认针对各大主流浏览器提供了更为一致的样式表，并且实现了许多跨浏览器问题的修正，它能够在保留有用的默认样式的同时，还能够取消浏览器特定的样式表和渲染差异，从而提供更加规范的视觉和用户体验。下面是一个导航样式的样例：
-- ------- --- ------ --- ------- --- ---------- -------- -- ------- --------------------- -------------------- -------------------- - ------------------- ------- ---------------- ------- ----------- ------- -- ------- --- --------- -- ----- --------- ----- -- --- -- ------- -------- -- ------- ----- ---- ------ -- ------ ------- -- ---------- ----- -- ------ ------ ------- -- ------- -- -------- -- -
Normalize.css 这种逐渐逐渐趋于标准化的样式表在可视化设计方面提供了非常大的便利，从而更好地支持了 Web 标准应用。同时，也解决了许多在跨浏览器应用中可能发生的问题，这使得它成为了更加易于使用的样式方案和开发工具。
三、Reset 和 Normalize.css 的不同
综合来看， CSS Reset 和 normalize.css 的最大区别是它们的重点。CSS Reset 重点在于规避浏览器默认样式的影响，一切基础样式从头构建。而 normalize.css 重点在于解决浏览器之间的视觉差异，从而给用户带来更优秀的浏览体验。
四、使用建议
在具体使用的过程中，每个人根据自己的需要来选择。如果您需要更多的自定义样式，建议使用 CSS Reset，因为它提供了更多的自定义选择。如果您希望能够在浏览器之间获得更一致的表现效果，则应该考虑使用 Normalize.css，因为它能够提供更一致的视觉和用户体验。
结论
CSS Reset 与 normalize.css 之间的差异和适用范围取决于我们在编写 Web 应用程序时的需要和优先级。我们应该把它们看作是在实现 Web 标准应用过程中的两个很好的选择，从而推动对包括 Web 2.0 标准在内的网络标准化实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cdddb5f551281025be395