对于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>