引见一下normalize.css
日期：2014-05-17 浏览次数：20757 次
介绍一下normalize.css
前面写过一篇关于reset.css的一些思考与探究
?
这篇主要是介绍一下?normalize.css?
?
?? ? ? ? ? ----- A modern，HTML5-ready alternative to CSS resets
?
下面部分内容来源于http://necolas.github.com/normalize.css/??本人简单地做一些简单的翻译工作：
?
1、它能做什么？
?
- 保留有用的默认值，这个区别于其他的CSS resets
- 标准化大范围的HTML elements的样式
- 纠正bugs，使浏览器具体通用性
- 通过一些巧妙的改进来增强可用性
- 用具体的说明来讲解代码的用处
2、代码详谈
?? ------ 下面我结合源码来与YUI reset.css进行比较
相同点：
/*一致的*/
table{
border-collapse:collapse;
border-spacing:0;
}
?
不同点：
q:before,q:after{
content:''; //YUI reset
}
q:before,q:after{
content:'';
content:none; //normalize 新加的
}
??? ?字体方面：
/*YUI reset.css*/
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
/*normalize.css*/
h1{
font-size:2em;
margin:0.67em 0;
}
h2{
font-size:1.5em;
margin:0.83em 0;
}
h3{
font-size:1.17em;
margin:1em 0;
}
h4{
font-size:1em;
margin:1.33em 0;
}
h5{
font-size:0.83em;
margin:1.67em 0;
}
h6{
font-size:0.75em;
margin:2.33em 0;
}
?
???html的设置
?? ------ 关于下面的规则我在chrome浏览器font-size<12px?提到过
html{
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
?
???增加了对img的处理
/*YUI reset.css*/
img{
border:0;
}
/*normalize.css*/
img{
border:0;
-ms-interpolation-mode:bicubic; /*解决ie7的图片拉伸的bug*/
}
?
???增加了对textarea的设置
textarea{
overflow:auto; /*去掉IE下垂直滚动条*/
vertical-align:top; /*增加可读性和alignment*/
}
????增加了对form元素字体设置
html,
button,
input,
select,
textarea{
font-family:sans-serif;
}
????增加了fieldset的设置
/*YUI reset.css*/
fieldset{
border:0;
}
/*normalize.css*/
fieldset{
border:1px solid #c0c0c0;
margin:0 2px;
padding:0.35em 0.625em 0.75em;
}
????增加了对a的设置
??
a:focus{
outline:thin dotted; /*Chrome下的特殊的outline的重置*/
}
a:hover,a:active{
outline:0;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
