在前端开发中，我们常常需要对网页进行样式的调整。而在网页样式调整的过程中，经常会碰到不同浏览器之间的样式表现不同的情况。通常我们需要通过对不同浏览器的样式进行重置来保证网页在不同浏览器中呈现出相同的样式表现。由此，CSS Reset 便应运而生。但在现实中，我们通常使用的是 normalize.css 而不是 CSS Reset。
为什么使用 normalize.css
CSS Reset 最初的想法是要彻底的将所有 CSS 属性都重置成标准的和一致的值，以便我们在开发的时候能够更轻松的开发出跨浏览器的网页。但实际情况是，CSS Reset 存在一些问题：
- 经过重置后的样式在一些元素上太过于极端，甚至可能导致一些本应该存在的样式被去除。
- 网页在不同浏览器间的显示不同，也是因为浏览器实现的差异存在。超出了 CSS Reset 可以解决的范围。
相反，normalize.css 的主要目的是将所有元素的默认样式规范化到一个共同的标准。即保持浏览器的默认样式表现统一，解决浏览器在默认样式上的一些差异。同时，normalize.css 还会纠正一些常见的桌面端和移动端浏览器的错误样式。
如何使用 normalize.css
以下是一个加载 normalize.css 的例子：
--------- ----- ------ ------ ----- ---------------- --------------------- ----- ---------------- ----------------- ------- ------ --- ------- -------
类似于 CSS Reset，您需要将 normalize.css 引入到 HTML 中，并确保它在您的样式表之前运行。
normalize.css 与 CSS Reset 的对比
下面是一些示例来对比 normalize.css 与 CSS Rest 的效果。
Button 样式
-- --- ----- -- ------ - ----------- ----- ------- ----- ------- -------- ---------- ---- -------- -- - -- ------------- -- ------- --------------------- -------------------- -------------------- - ------------------- ------- ----------------- ------------ ----------------- ----- -
可以看到，CSS Reset 将按钮的样式全部去掉；而 normalize.css 会将按钮的样式规范为一套标准的样式，解决了浏览器在默认样式上的一些差异。
几何图形样式
-- --- ----- -- ---- ------ ------- ----- - ------- ----- ---------- ----- - -- ------------- -- ---- ---- ----- - --------------- ------- -
可以看到，CSS Reset 仅重置了宽度，而 normalize.css 还对几何图形的对齐方式进行了规范。
结论
虽然 CSS Reset 可以通过一定的代码优化，但是 normalize.css 更加友好兼容性更好，能够解决很多浏览器默认样式的差异。
因此，我们在开发时应该优先选择 normalize.css，避免开发过程中出现多种不可预知的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737223b317fbffedf0851aa