phpstudy集成环境

 首页 > 使用normalize.css遇到的问题？

使用normalize.css遇到的问题？

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

为什么要清除呢？

如果你做了一个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（这又是一个比喻）。

reset.css和normalize.css两个是不用

reset.css 是将所有的浏览器样式都统一，并清楚所有标签的默认样式，统一成自己想要的样式
normalize.css 也是将所有的浏览器样式统一，但是保留了标签的默认样式，比如： strong表示粗体，i 表示斜体，ul默认是有点...等等之类的

其实说白了，都是一样的东西……
都是对浏览器的默认样式做一些设置，然后方便后期自己对样式做处理。

这个你自己也可以针对自己的项目做一些reset之类的处理，下面这个是我之前整理后给自己用的，如果有兴趣的话，可以参考一下：http://linxz.github.io/tianyizone/css_reset.html

以上是两者的区别。

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

【热门文章】
【热门文章】