css重置样式

网上有很多的重置样式的文件，但是有很多的样式都是多余的，也就是说它本来就没有这个默认的样式，你就必要再去重置它，这样显的多余有很浪费资源。
最不可取的就是用通配符：*{margin:0;padding:0;}

使用*是比较耗时间的，不是所有的标签都有，所有就显得优点多余。

大家先看看这张图，这是我整理在github上的。

2018-01-16

从上面的可以看出，有的元素有默认的padding和margin，有的没有,所以通配符到正常的项目上引用是不明智的选择。

有margin值的元素有：

body h1 h2 h3 h4 h5 h6 p blockquote pre hr figure dl dd ul ol fieldset menu

有padding值的元素有:

ul ol button th td fieldset legend textarea menu

有border值的元素有：

hr input button fieldset textarea

虽然这些都有border,不过个人觉得没有必要进行重置。

body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,figure, dl,dd,ul,ol,fieldset,menu{margin:0}
ul,ol,button,th,td,fieldset,legend,textarea,menu{padding:0}

HTML5新标签针对旧浏览器重置

header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}

其它元素样式重置

body

body{
  line-height:1;
}

字体大小

h1,h2,h3,h4,h5,h6,pre{
  font-size:100%;
}

列表

ol,ul{
  list-style:none;
}

表格

table {
  border-collapse: collapse;
  border-spacing: 0;
}

链接

:link,:visited{
  text-decoration:none;
}

金手指

a,button,input[type='button']{
  cursor:pointer;
}

利用伪类清除浮动

.clearfix:after {
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}
.clearfix {
  *zoom:1;
}

查看 cssreset文件说明

更多css规范 NEC