Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

https://necolas.github.io/normalize.css/7.0.0/normalize.css

创造normalize.css有下面这几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Normalize vs Reset

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3、Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

4、Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

如何使用 normalize.css

首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。

策略一：将normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。

策略二：引入normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。

官网: http://nicolasgallagher.com/about-normalize-css/

谈一谈Normalize.css相关推荐

浅谈Normalize.css
转载自简书:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性. ...
[转]浅谈Normalize.css
原文地址:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相 ...
谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...
php normalize,normalize.css的使用
Normalize.css的使用及下载 Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normaliz ...
Java程序员谈一谈-----java程序员成长之路
转载:http://www.banzg.com/archives/679.html?ref=myread 阿里面试回来,想和Java程序员谈一谈引言其实本来真的没打算写这篇文章,主要是LZ得记忆力 ...
[Vue][面试]谈一谈对vue的设计原则的理解
谈一谈对vue的设计原则的理解思路: 在vue官网上写着大大的定义和特点: -渐进式JavaScript框架 -易用.灵活和高效渐进式JavaScript框架: 与其它大型框架不同的是,Vue被设 ...
谈一谈对 TailwindCSS 的看法
谈一谈对 TailwindCSS 的看法从 NPM.DEVTOOL 的标签中可以看出: 每个月 npm 下载量高达 300 万次,jsDelivr 下载量更是高达 900万次,Star 数也即将突破 ...
谈一谈打造高效能技术团队的七个方法
最近在读<高效能人士的七个习惯>这本书,读了两遍,在我看来这是一本好书,但是却没有想象那么好.因为虽然书中提到的七个信条,真的都是非常精粹和正确的人生道理,但实际掌握和融合进自己信念的过程 ...
阿里面试回来，想和Java程序员谈一谈
阿里面试回来,想和Java程序员谈一谈引言其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来.LZ自己当初面试完以后, ...
谈一谈我所遇到的定位属性
世界杯是一个很神奇的运动,让我欲罢不能的想参与其中.于是我买德国赢--德国输了,巴西赢--巴西平了,哥伦比亚赢....最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门,买的几只基金也像过山车一样,刹不住 ...

谈一谈Normalize.css

Normalize vs Reset

如何使用 normalize.css

谈一谈Normalize.css相关推荐

最新文章

热门文章