雪碧圖的使用場(chǎng)景：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1，靜態(tài)圖片，不隨用戶信息的變化而變化
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2，小圖片岸军，圖片容量比較小
? ? ? ? ? ? ? ? ? ? ? ? ? ? 3，加載量比較大
? ? ? ? ? ? ?為什么要用雪碧圖：有效的減少http請(qǐng)求數(shù)量瓦侮，加速內(nèi)容顯示艰赞；
? ? ? ? ? ? ?為什么說(shuō)減少http請(qǐng)求，可以加速內(nèi)容顯示
? ? ? ? ? ? ?每請(qǐng)求一次肚吏，就會(huì)和服務(wù)鏈接一次方妖，建立鏈接需要額外時(shí)間的
? ? ? ? ? ?可以盡量減少http請(qǐng)求的數(shù)量，達(dá)到優(yōu)化的效果
不推薦使用雪碧圖的地方：
? ? ? ? ? ? ? ? ? 一些大圖不建議拼成雪碧圖 ?如果用大圖拼成雪碧圖的話罚攀，加載的慢党觅，反而達(dá)不到顯示快的效果
css Sprite(雪碧圖）的實(shí)現(xiàn)原理：
? ? ? ? ? ? 通過(guò)css background-position這個(gè)屬性來(lái)控制的，通常來(lái)講我們?cè)O(shè)置一個(gè)區(qū)域的背景圖斋泄，然后來(lái)控制背景圖的位置杯瞻，來(lái)實(shí)現(xiàn)這個(gè)功能
? ? ? ? ? ? 拼合背景圖的小圖（x,y）為負(fù)值，以左上角的頂點(diǎn)為（0,0）坐標(biāo)的炫掐，當(dāng)我們需要對(duì)坐標(biāo)系中一個(gè)區(qū)域進(jìn)行展示的時(shí)候魁莉。
雪碧圖的實(shí)現(xiàn)方式：
? ? ? ? ?PS手動(dòng)拼圖（小的網(wǎng)站，自己可以動(dòng)手拼圖）
? ? ? ? 使用sprite工具自動(dòng)生成（大型網(wǎng)站）
? ? ? ? ?CSS sprite 自動(dòng)生成工具------CssGaga是windows環(huán)境下募胃，快速生成雪碧圖的工具旗唁，這款工具除了幫我們生成雪碧圖之外，還會(huì)把background-position的代碼寫(xiě)好
? ? ? ? ?網(wǎng)上有安裝和配置都有（需要大量的配置痹束，說(shuō)明很詳細(xì)）樣式
? ? ? ? ? 注意：每個(gè)標(biāo)簽都有自己默認(rèn)的margin和padding检疫；每次都要清除默認(rèn)樣式的原因，自己設(shè)置樣式的原因是参袱，保證在各個(gè)瀏覽器下的展示效果相同电谣。
