normalize.css使用方法

综述

Normalize.css是一种CSS reset的替代方案。

我们创造normalize.css有下面这几个目的:

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

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

Normalize vs Reset

知道Normalize.css和传统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 是模块化的

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

结语

无论从适用范畴还是实施上,Normalize.cssReset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的,而每一次改动的原因也都写在commit信息中,这些都是有迹可循的。

时间: 2024-11-08 14:58:54

normalize.css使用方法的相关文章

normalize.css使用方法,normalize.css下载

来,让我们谈一谈 Normalize.css Nov 18, 2014 - 浏览量:22,046次 | Normalize.css CSS 本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.No

两种不同的重置样式方法(normalize.css)

重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生. * { padding: 0; margin: 0; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”. /*! normalize.css v4.1.1 | MI

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

Normalize.css 是? Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一. Normalize.css只是一个很小的css文件,但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性. 相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.总之,Normalize.css是一种CSS reset的替代方案. Normalize.css 能干什么? 保留有用的默认值,不同于许多 CS

Normalize.css的使用及下载

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS Tricks 以及许许多多其他框架.工具和网站上. Normalize.css 项目地址 Normalize.css 在GitHub上的源码

引用Normalize.css之后,flex布局失效的原因以及解决办法

昨天无意知道Normalize.css框架.于是在最近使用了h5属性的项目中引用来玩玩.但是习惯了用通配符去重置.在引用Normalize.css之后各种不适.最直接的影响,比如我对footer header等H5标签容器设置了display:flex;却没有任何效果.打开浏览器审查元素发现, Normalize.css给h5的这些标签预定义了display:block.而且权值非常高,把我自己footer的display:flex覆盖掉了,这就是我设置flex布局属性不起作用的原因. 解决方法

Normalize.css的使用

本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS

来,让我们谈一谈Normalize.css

本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormalizeCss/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootst

[转载]来,让我们谈一谈Normalize.css

来源 : http://segmentfault.com/a/1190000002239676 ------------------------------------------------------------------------- 本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormalizeCss/ Normalize.css 只是一个很小

来,让我们谈一谈 Normalize.css

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备的优质替代方案.Normalize.css现在已经被用于Twitter Bootstrap.HTML5 Boilerplate.GOV.UK.Rdio.CSS Tricks 以及许许多多其他框架.工具和网站上. Normalize.css 项目地址 Normalize.css 在GitHub上的源码