什么是CSS Reset。HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。
部分CSS reset内容如下html {color:#000background:#FFF}t5
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{margin:0padding:0}
table {border-collapse:collapseborder-spacing:0}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normalfont-weight:normal}
li {list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%font-weight:normal}
q:before,q:after {content:''}
abbr,acronym {border:0font-variant:normal}
sup {vertical-align:text-top}
sub {vertical-align:text-bottom}
input,textarea,select {font-family:inheritfont-size:inheritfont-weight:inherit}
input,textarea,select {*font-size:100%}
legend {color:#000}
Reset是重置的意思。现在的浏览器五花八门,光ie就有好多版本,还有火狐,Chrome等等。每个浏览器的默认样式也是不同的。所以就要考虑一个兼容问题。比如你用ie打开网站正常,但是用火狐或其他浏览器打开的时候,网站就变形了。这些都属于兼容问题。
为了避免这种问题,我们需要把一些常用的html标签重置(CSS Reset),将它们统一定义,就可以产生相同的显示效果。比如:
html, body, div, span,object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, abbr,del, dfn, em, img, ins,strike, strong, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, object, col, colgroup, caption, summary, tbody, tfoot, thead, th{margin:0padding:0border:0}
这个方法让所有的选择器的padding、margin和border都设置成0。
当然。reset.css只是一个名字,方便阅读,标准一些而已。你可以自己随意命名。
详细信息可以阅读http://baike.baidu.com/link?url=N09ph5vvUafzfyWHAGPXNu0ACSwTLd3qbNc8xqRBkoeSOHAdfcG3mH3jajW7pvUQy-LM0Njv2a0mgIgrvbYNSa
最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值,只重置不同默认样式的差异,可以说css reset的高级版。相对于普通的css reset,Normalize的的浏览器的兼容性更好,毕竟是专业人士经过不同版本浏览器测试打造的css文件,看看它的兼容性就知道多强悍:
支持的浏览器:
Google Chrome (latest)
Mozilla Firefox (latest)
Mozilla Firefox ESR
Opera (latest)
Apple Safari 6+
Internet Explorer 8+