0

使用normalize.css代替reset.css但在使用中浏览器会有一些默认样式,比如说
ul会有默认的内边距,dd也会有默认的内边距。自己还得手动的清除,那么和reset.css
比起来,normalize.css优势怎样体现呢?

2015-07-15 提问

查看全部 5 个回答

3

已采纳

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; 
}

  1. div,li标签默认是没有margin,padding值,但是还是被设置{margin:0; padding:0;}属性
  2. dt标签的margin,padding默认值就是0,但这里又被设置了一次{margin:0; padding:0;}
  3. code标签属于inline行内元素,是不能设置{margin:0; padding:0;}
    ....

我们再来看一段

address,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}

这个设置往往在开发中有很多潜在的问题,单从用户体验上讲一个例子:
假设你的页面上有一个可编辑内容区域,用户设置了一个strong效果,但发现它却没有任何的反应,用户就会产生的疑惑,为什么我加粗了却没有反应?

或许,你都不知道它已经被暴力的清0了。


normalize.css 帮你合理重置掉可能产生问题的样式,坚持保留部分浏览器的基础样式,解决一些潜在的问题,做到真正合理的浏览器样式初始化。(想你所想,给你所要...)

推荐答案

6

为什么要清除呢?

如果你做了一个cms系统,或者博客系统,论坛系统,当用户在富文本编辑器里面输入列表时,看到的也是有缩进的,结果点击提交后,再一看效果,肯定得抓狂。

所以,normalize.css 只是把标签的表现形式统一了。让所有的浏览器都按照一个样式。

而reset.css呢?太疯狂了? 把所有的标签都变成了 div 了。

你写个 li,本来应该是个列表,结果表现出的样式和 div 一样。那我还不如写 div 呢!!

你写个 dd,本来是名词解释用的,结果表现出的样式和 div 一样。那我还不如写 div 呢!!

你写个 h3,本来是3号标题,结果表现出的样式和 div 一样。那我还不如写 div 呢!!


你写个 ul li,在 ie 里面,可能是3像素。在ff里面,4像素。chrome里面,5像素。IE使用padding,而ff使用margin。(打个比喻)

reset.css方式,太激进了。过头了。直接把所有的浏览器默认样式都去掉了。

normalize.css好,列表依然是列表,只是把所有的浏览器中样式都变成了 3像素,margin-left(这又是一个比喻)。

推广链接