Normalize.css 样式作用,及使用方法

unimof 2021年02月25日 257次浏览

Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。
github地址:normalize.css

最新的版本是 V8.0.1
image.png

1. 小巧轻便

normalize.css未压缩的源码只有不到6k,压缩后的大小只有1.81k,非常的小巧轻便。

2. 广泛的浏览器支持

相比于传统的css reset,Normalize.css是一种现代的,为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap,HTML5 Boilerplate,GOV.UK,Rdio,CSS Tricks以及许许多多其他的框架,工具和网站上。

支持的浏览器

  • Google Chrome (latest)

  • Mozilla Firefox (latest)

  • Mozilla Firefox ESR

  • Opera (latest)

  • Apple Safari 8+

  • Internet Explorer 10+

  • Edge

3. 作用

Normalize.css的价值,主要是提供了一个统一的代码,屏蔽浏览器之间元素渲染的差异(虽然不能完全消除,但是可以屏蔽掉大部分差异),使得前端开发可以专注于业务,而不用担心浏览器之间的差异。

  • 保留有用的默认值,不同于许多 CSS 的重置

  • 标准化的样式,适用范围广的元素。

  • 纠正错误和常见的浏览器的不一致性。

  • 一些细微的改进,提高了易用性。

  • 使用详细的注释来解释代码。

4. 使用

一般前端开发的时候,都会有一个style.css文件,用来统一放置全局css样式,我们可以把Normalize.css的代码放到style.css的最上面,然后再往下编写自定义全局样式,这样可以达到全站统一的目的。

当然,我们也可以在模版页面统一引入Normalize.css的全局样式。