在前端开发中，CSS 重置（reset.css）或者 CSS 标准化（normalize.css）是基础的样式处理方式，其目的是消除不同浏览器在渲染页面时的差异性，让开发更加稳健、高效。
虽然两者的目的相同，但它们的实现方法有所不同。在本文中，我们将从 normalize.css 出发，探讨 reset.css 和 normalize.css 的异同点，并比较它们的使用差异。
什么是 reset.css 和 normalize.css
在开始比较之前，我们先来了解一下 reset.css 和 normalize.css ，让大家更好地理解它们的作用。
reset.css
CSS 重置最早出现在 Eric Meyer 的著作《CSS 精粹》中，它是一种干净、简单的 CSS 文件，目的是将浏览器原有的样式清除（或者说归零）或者重置，达到在不同浏览器中的页面效果一致。
例如：
-- -------------------- ---- ------- -- --------- -- -- ---------------------------- -- - - ----------- ----------- ------- -- -------- -- - -- ---- -- ----------------- -------- ------ -------- --- ------ ----- -
normalize.css
normalize.css 是一种自动化的标准化处理方式，它在 reset.css 的基础上进一步规范了 HTML 元素的默认样式，以便于开发者进行统一的样式处理。
normalize.css 的作者 Nicolas Gallagher 的宗旨是：
去除各种浏览器差异的默认样式。为了开发者能够更加高效、稳健地撰写CSS代码。
normalize.css 修复了大量浏览器的样式差异，并实现一些标准样式，它做的事情和 reset.css 差不多，但是 normalize.css 的做法是在原有基础之上进行样式的统一。
normalize.css 对 HTML 标签的样式处理非常细致，不仅仅包含一般的样式（例如盒模型的变化），还对 HTML5 标签、表单控件、多种提示框进行了样式的处理。
reset.css 和 normalize.css 的比较
normalize.css 相对于传统的 reset.css 来说，他们的样式处理方式不同。reset.css 的样式清除非常彻底，可以将所有的样式都清空，以达到浏览器页面在所有情况下展示相同的效果。normalize.css 则是在保留默认样式的同时，对样式进行了规范，统一化浏览器的差异。
以下是 reset.css 和 normalize.css 的主要区别：
样式的权重
对于所有的标签默认样式，normalize.css 只是修改它们没有具体的权值，而 reset.css 则会将大部分的标签样式设置为 0，使得页面的权重更低，避免不必要的覆盖。
复合选择器
reset.css 删除了布局元素的一些默认样式，例如，HTML4 标准中 div 元素的 display 默认值为 block，而 HTML5 标准中 div 元素也是默认 display:block 即使在重置样式后也是 block。normalize.css 则保留了这些属性，使浏览器能正确地渲染页面。
表格样式
相对于 reset.css ，normalize.css 更加谨慎的处理了表格，因为浏览器对表格的渲染表现不一，导致表格的样式难以归一。normalize.css 自然而然地将表格样式进行了充分处理，使得表格的显示效果统一。
外观和样式
normalize.css 不会让页面毫无表现力，它会根据情况适当地增加部分样式以提高页面外观的表现。而 reset.css 则不是那么重视这方面的细节，它的主要目的是保证页面的统一性。
如何选择使用 reset.css 或 normalize.css
选择使用 reset.css 还是 normalize.css，关键在于你对页面样式的追求程度。如果只是想要页面样式表现在不同浏览器中呈现相同的效果，那么 reset.css是一个不错的选择；而且它的样式处理简单明了，容易上手。不过，如果你希望页面的样式表现更加精致、美观，并且在各个浏览器上表现的都一致，那么 normalize.css 是一个更好的选择。
示例代码
我们分别从 reset.css 和 normalize.css 来设置一个按钮的样式，来看两者的差异。
reset.css 的实现：
-- -------------------- ---- ------- ----- -------- ------------- -------------- -- -------- ---- ------- -- ---------- ----- ------------ ------- ------ ----- ----------- ------- ---------------- ----- --------------- ------- ----------------- ----- -- ---------------- -- ------- ----- ------- -------- ----------- ----- -
normalize.css 的实现：
-- -------------------- ---- ------- ----- -------- ------------- ------------ ------- ----------- ------- ------------ ------- --------------- ------- -------------------- ----- ----------------- ----- ---------------- ----- ------------ ----- ----------------- ------------ ------- --- ----- ----- -------- -------- -------- ---------- ----- ------------ ---- -------------- -------- -
从上面的代码可以看到，在重置了样式后，reset.css 实现了按钮的基本样式，而 normalize.css 除了基础样式外还处理了按钮的白空间、字体大小、行高、边框、圆角等，使得按钮的样式更加整齐，也更符合美感。
结语
了解了 reset.css 和 normalize.css 的使用区别，对前端开发相当有指导意义，根据实际需求来选择样式处理方式，可以减少不必要的工作，并节省时间成本。当选择样式处理方式时，考虑到页面的表现力以及兼容性，是非常必要的，希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678447549137010942db208b
