在前端开发中，我们经常遇到一些 cross-browser 的问题，比如不同浏览器对某些标签的默认样式不同，而这些样式可能会影响我们的页面布局和样式实现。为了解决这些问题，我们一般会对样式做 reset 或者 normalize 处理。
做 reset 意味着完全清空浏览器的默认样式，从头到尾自己处理所有样式；而 normalize.css 的做法则是在保留大部分默认样式的基础上进行针对性的修正，以保证样式在所有浏览器中都支持得尽可能一致且美观。
为什么要使用 Normalize.css
解决浏览器默认样式的不同之处。不同浏览器对于标签的默认样式是不同的，这可能导致我们的页面在不同浏览器呈现出不一样的效果，通过使用Normalize.css，我们可以让不同浏览器的显示效果更加的一致。
减少重复代码，提高开发效率。使用Normalize.css，我们就无需编写大量的 CSS 代码去处理浏览器之间的样式不同。这样可以有效地减少重复代码，提高开发效率。
保证可访问性。使用 Normalize.css 可以保证网站的可访问性，因为它确保了我们的 HTML 在各种浏览器和设备上都能够看起来大致相同，并且可以按照我们的意愿正确地解释。
更好地定制样式。Normalize.css 并没有像 reset 那样将所有浏览器的默认样式都清除了，这意味着我们可以基于默认样式进行更好的定制和扩展。
使用 Normalize.css
使用Normalize.css非常简单，你只需要在你的HTML文件中引入它就行了，具体步骤如下：
下载 Normalize.css：https://necolas.github.io/normalize.css/
将 Normalize.css 添加到你的项目中，你可以将其复制到你的项目中，也可以通过npm安装。
<link rel="stylesheet" href="normalize.css">
- 最后在你的项目中加入此代码。它将严格覆盖浏览器中的默认样式。
-- -------------------- ---- -------
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
---- -
------- --
-
---- -
-------- ------
-
-- -
---------- ----
------- ------ --
-
-- --- --Normalize.css 原理
Normalize.css 的核心原则是尽量保留浏览器的默认样式，只对必要的样式进行重置或覆盖。具体来说，它通过：
统一了跨浏览器的表现，而不是从零开始重写。
修复了使用不一致的属性的生僻”字”中的 bug，并修复了一些常见的框模型 bug 。
规范化了样式，其中大多数元素具有相同的显示属性。
限制了特殊样式的使用（例如 inherit和透明度）以减少样式的意外问题。
修复了 Webkit 的 bug，不需要复制 input、textarea 等元素的样式。
在实践中，Normalize.css 保证了我们的页面在不同浏览器中呈现出统一且可预测的样式，同时保留了浏览器的特性和改进。
总结
总的来说，Normalize.css 是前端开发中一个非常有用的库，它帮助我们解决了在各种浏览器和设备上展示相同的网站的问题，可以让我们快速开发出高质量的网站。如果你想减少 CSS 的编写时间并减少浏览器兼容性问题，那么 Normalize.css 是你不容错过的一个好选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465523b968c7c53b06083c8