对于CSS新人的几个坑

以前对CSS的了解也很少，本身平时写东西时也基本依赖bootstrap，基本没有本身去设计过UI，在此次的项目经历中，踩到了一些大坑，固然，至对于新手才有这些困惑，在这里记录下来，方便本身以后查阅，也分享给更多进坑的新人们。

固然，开始前仍是要吐槽一下前端最大的坑——IE！

 

清除格式

当你在写CSS以前，若是你的页面中并无引入其余的样式，必定要先级的去“清除样式”，这里的清除样式，主要指的是清除浏览器的两个默认样式（padding和margin），否则，你的额昂也背景会出现白边的异常情况。

* {
　　margin: 0px;
　　padding: 0px;    
}

 

背景位置

当你去设置背景的时候，必定要注意背景的做用范围，background-clip 属性规定背景的绘制区域，background-origin 属性规定 background-position 属性相对于什么位置来定位。

background-clip: border-box | padding-box | content-box;
background-origin: padding-box | border-box | content-box;

 

善用表格

看名字的话，表格好像是用来展现一些报表输出的，可是，做为一个拥有块级属性的元素来讲，表格有着和div同样的优秀的排版能力，并且我以为，对于新手，更加实用。尤为是当你想用垂直居中之类的属性，可是又碍于浏览器兼容，表格的自身属性就发挥了出来。他还有本身原生的分栏，跨列，跨行，等等。若是能用好表格，能够在开发的时候事半功倍！

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td></td>
    </tr>
  </tfoot>
</table>

 

 防止404

当你的<a>标签的href所指向的地址为动态地址时，建议将rel属性设为nofollow，以防止搜索引擎将其错误的地址显示在搜索结果，致使用户访问形成404错误或者跳转到错误的页面，影响用户体验。

<a href="$href$" rel="nofollow">Link</a>