對於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>