Normalize.css 初识

一. 用来干嘛的

一个现代的、准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念。

Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准。它只是针对那些需要正常化的样式进行处理。

A modern, HTML5-ready alternative to CSS resets

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.



二.我们知道

Normalize.css 处理样式的理念很现代。

HTML5 技术是个很好的技术,需要去支持它。

CSS Reset 处理样式的理念有不好的的地方,需要去替换它,用在它原来的位置。

存在某些元素在不同浏览器中,被渲染出来的效果不一致。

我们使用的浏览器有些并不符合现代标准。

Normalize.css 只对需要正常化的样式进行处理。

CSS Reset 可能对一些不需要处理的样式进行了处理



三.问题来了

Normalize.css 与 CSS Reset 理念的区别还不太清楚!亲,听我解释——

让我们看引入了 CSS Reset 理念的代码

<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset.css" type="text/css">

后,页面元素(以标题 h* 元素为例)怎样显示的:

再让我们看引入了 Normalize.css 的代码

<link rel="stylesheet" href="normalize.css">

后,页面元素怎样显示的:



四.所以说

CSS Reset 几乎会将所有的浏览器的自带样式重置掉,以保持各浏览器渲染的一致性;

Normalize.css 的理念则是尽量保留浏览器的默认样式,只对需要的样式进行重置。

Normalize.css 是改良派,CSS Reset 是革命派。Normalize.css提倡,各个元素都有其存在的道理,像这样 *{margin:0;} 简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们制定个规范,确保他们在任何浏览器里都干好自己的活儿。



五.参考链接

1). Normalize.css 官网

2). Normalize.css 与传统的 CSS Reset 有哪些区别?

3). Normalize.css 和 Reset CSS 有什么本质区别没?

(完)

时间: 2024-10-11 21:18:31

Normalize.css 初识的相关文章

normalize.css可以对css初始化,不同浏览器可以统一初始样式

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font

给所有浏览器的元素设置了一个共同的样式:Normalize.css

使用Normalize.css重置默认样式 CSS重置有助于根据所有设置的样式建立一个基准样式.样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式. 尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因css resets会有很大的困难. 大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset.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上的源码

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

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

关于Normalize.css

之前做Bootstrap4的sharing时就了解过这个东西,刚好最近要用到,就深入的研究了一下. 简单点说,Normalize.css就是个CSS RESET(样式重置)的文件. 何为CSS RESET? *{ padding: 0; margin: 0; } 上面便是一个最简单的CSS RESET,而在实际的重构中,重置样式远远没有这么简单.一般的CSS RESET会如下. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fiel

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源码解析

什么是normalize.css?  它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize.css会保持浏览器的默认效果. 对大多数的元素进行了合理的限制. 修复了bug和一些常见的浏览器的不一致. 提高了开发效率. normalize.css使用情况如何? github地址:https://github.com/necolas/normalize.css. 从github上我们可以看到,

normalize.css使用方法

综述 Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的内容.表单和表格都进行了一般化.尽管这个项目基于一般化的原则,但我们还是在合适的