1. Css Sprite：條形圖

條形圖嚴格的來說也是一種矩形圖，只不過這個矩形非常長，故稱為條形圖。

圖標少的時候到還好，但是圖標如果特別多的話，就不太適合放在一行里了，那么為什么還會有條形圖這個概念呢？

答案要從動畫開始說起：

眾所周知，定義一個動畫最簡單的方式就是只定義開始時的狀態和結束時的狀態，中間的狀態電腦會自動替你計算。所以如果是條形圖的話只需要定義開始時在哪一個位置，再定義一個結束時在哪一個位置就夠了，而且這種圖一看就能知道大概是個什么樣的動畫。

但是如果要是矩形圖可就麻煩了：

首先乍一看不太容易看出來大概是一個什么樣的動畫效果，不如上面那種條形圖一目了然，其次定義動畫時還要定義運行到百分之多少的時候轉到下一行，然后再百分之多少再轉，還要計算出下一行距離上一行的位置。要是這種規則的倒是還好，最起碼有規律可循，但是就怕那種復雜Css Sprite：

可以看到人物與人物之間的間隔并不完全一樣，時大時小，這時候就需要你去一點點的測量，然后調試，費了半天功夫才能出來一個相對令人滿意的效果。

當然條形圖也怕這種間隔不規律的動畫幀，但是相對于矩形圖來說無論是測量還是調試都要更加方便一些。

2. 小結

推薦圖標不多并且大小相似的情況下將其排列成條形Css Sprite，這樣的話調整位置時只需要關注橫軸坐標，而無需再計算縱軸坐標了。

條形圖與矩形圖就相當于一維與二維之間的聯系一樣。