CSS 样式初始化(简易版)

228 阅读1分钟

今天一个刚学css不久的同学,给我抛出了一个问题:

*为什么我写的样式最终结果和我想象的都不太一样呢? *

我一看他的代码就明白了,他压根没有初始化。由于默认样式的存在,所以总是导致一些预期外的小问题。

废话不多说直接贴代码
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, input, p, form, a, textarea{
  margin: 0;
  padding: 0;
   /* font-family 完全可以改成你需要的 */
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;   
}

ol, ul, li {
  list-style: none;
}

a {
  text-decoration: none;
  display: block;
}

img{
  border: none;
  display: block;
}

/* 给需要清除浮动的标签的class加上clearfloat类 */
.clearfloat {  
  zoom: 1;        /* 适配IE */
}
.clearfloat:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;  
}

我这就几行代码,算是简易版了,但是提供给初学者来切图,应该算是绰绰有余了。

当然github上还有更好用更完善的初始化css代码,这里就不贴链接了自行搜索即可。