在前端开发中，我们经常需要对网页的样式进行控制。但是每个浏览器对于标签的默认样式都有一个独特的实现方式，这导致在不同的浏览器下，网页元素之间的样式差异会非常大。为了解决这个问题，开发者们创造了 CSS Reset 和 normalize.css 两个工具。
CSS Reset
CSS Reset 是指通过一系列的样式重置，将所有的网页元素的样式都统一为同样的表现。目的是为了消除浏览器间的差异，使得网页在任何浏览器下都以同一种方式呈现。
一个 CSS Reset 文件通常包含了许多类似下面这样的代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
这段代码为页面中的所有元素设置了初始值，消除了大部分浏览器的差异。
使用 CSS Reset 简单粗暴，可以让网页元素样式相对统一。但是一些细节处的设计可能也被重置了，需要选择性的重新设置。
normalize.css
normalize.css 是一个可定制的样式库，它通过对不同浏览器样式的标准化，还原了浏览器的一些默认样式，并且修复了一些常见的 bug。
normalize.css 与传统的 CSS Reset 不同，它不是将浏览器的样式全部重置，而是对浏览器的默认样式进行覆盖和修复，尽量避免了重置后导致一些意外问题的出现。
normalize.css 提供了一些基本的全局样式设置，而且在一些标签的样式上作了很多优化，例如：
- 正确处理 font-weight 在某些浏览器下的差异
- 保证了 table 元素在各大浏览器下表现一致
- 正确设置了 form 元素在不同浏览器下的样式
示例代码如下：
-- -------------------- ---- ------- ---- - ------------ ----- ------------------------- ----- - ---- - ------- -- - ---- - -------- ------ - -- - ---------- ---- ------- ------ -- - --- ------- ------ --------- ------- -------- - ------------ ----------- ---------- ----- ------------ ----- ------- -- -
normalize.css 中的代码比较简洁优雅，而且不会产生很多意外问题。
总结
CSS Reset 和 normalize.css 在网页样式统一化方面都起到了非常重要的作用。CSS Reset 更适用于项目较小，且不需要特别精细样式的页面；而 normalize.css 更适合于有明确设计要求的大型项目。
在使用任何一个库之前，要了解这个库的功能及适用范围，并使用工具根据不同项目的需要进行个性化自定义才是正确的方式。
以上，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b38c37d4982a6eb52519e