1. Css Sprite：條形圖

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

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

答案要從動畫開始說起：

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

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

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

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

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

2. 小結(jié)

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

條形圖與矩形圖就相當(dāng)于一維與二維之間的聯(lián)系一樣。