使用normalize.css代替reset.css但在使用中浏览器会有一些默认样式,比如说
ul会有默认的内边距,dd也会有默认的内边距。自己还得手动的清除,那么和reset.css
比起来,normalize.css优势怎样体现呢?
reset.css样式重置会让各个浏览器的CSS样式保持一个基准,而这个基准就是“归零”。
但它归零的思想过于暴力,宁可错杀一千,也不放过一个要清零的元素,其实很多设置都是画蛇添足
取一段reset.css的代码
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
code, form, fieldset, legend, input, button, textarea, p,
blockquote, th, td {
margin: 0;
padding: 0;
}
div,li标签默认是没有margin,padding值,但是还是被设置{margin:0; padding:0;}属性
dt标签的margin,padding默认值就是0,但这里又被设置了一次{margin:0; padding:0;}
code标签属于inline行内元素,是不能设置{margin:0; padding:0;}
....
我们再来看一段
address,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
这个设置往往在开发中有很多潜在的问题,单从用户体验上讲一个例子:
假设你的页面上有一个可编辑内容区域,用户设置了一个strong效果,但发现它却没有任何的反应,用户就会产生的疑惑,为什么我加粗了却没有反应?
或许,你都不知道它已经被暴力的清0了。
normalize.css 帮你合理重置掉可能产生问题的样式,坚持保留部分浏览器的基础样式,解决一些潜在的问题,做到真正合理的浏览器样式初始化。(想你所想,给你所要...)
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。