1. div裡包含img底部必定多出空白的解決辦法

解決方案：

1、設定div{ font-size: 0}

2、設定img{ display: block}

3、設定img{ vertical-align:top;}

推薦第二種方法，讓img物件成為塊級元素。

2．繪製圓形圖片

    height: 26px;

    width: 26px;

border-radius: 50%;

3. background-size的cover特定值會保持影象本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域

4.換行： 

word-break: break-all;

word-wrap: break-word;

5.過渡transition

transition: all .3s ease;

5.邊框灰線：

border-bottom: 1px solid #eee;

6. href=”javascript:void(0);”與href=”#"的區別

<a href="javascript:void(0)">點選</a>點選連結後不會回到網頁頂部 <a href="#">點選</a>

"＃"其實是包含了位置資訊，例如預設的錨點是＃top 也就是網頁的上端

而javascript:void(0) 僅僅表示一個死連結這就是為什麼有的時候頁面很長瀏覽連結明明是＃可是跳動到了頁首

而javascript:void(0) 則不是如此所以呼叫指令碼的時候最好用void(0)

使用javascript的方法

<a href="#" onclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" onclick="javascript:方法;return false;">

補充 <a href="javascript:hanshu();"這樣點選a標籤就可以執行hanshu()函數了。

7. a標籤中onclick與href之間的問題

click和href根據瀏覽器解析不同來確定誰先執行，又或者兩者都執行。有些瀏覽器即使加入了href="javascript:void(0);"，也不一定會有效，所明白點，就是href本身包含了點選事件。因此click成了多餘。這種需求建議捨棄a標籤，用其他標籤來代替，通過增加樣式來達到同樣的視覺效果

8.三角

<i></i>

.list_bd ul li .btn .go i {

    position: absolute;

    width: 0;

    height: 0;

    border-width: 4px;

    border-color: transparent  transparent  transparent  #c5181e;

    border-style: dashed dashed dashed solid;

    right: 4px;

    top: 12px;

}

9.

         text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

transform: translate(0, 0);

10. Chrome瀏覽器下小於12號字的解決方案

font-size: 12px;

-webkit-transform: scale(0.8);

transform: scale(0.8);

11.    z-index: 999;

如果2個或2個以上通過絕對或者相對定位的層有重疊的時候，這個時候'z-index' 的值誰的大就那個層顯示在最上面！直接設定個999或者是比999更大的數值的目的也就是為了保證該層能一直顯示在最上！