css-Sprite （雪碧图）

雪碧图的使用场景：

                             1，静态图片，不随用户信息的变化而变化

                             2，小图片，图片容量比较小

                            3，加载量比较大

             为什么要用雪碧图：有效的减少http请求数量，加速内容显示；

             为什么说减少http请求，可以加速内容显示

             每请求一次，就会和服务链接一次，建立链接需要额外时间的

           可以尽量减少http请求的数量，达到优化的效果

不推荐使用雪碧图的地方：

                  一些大图不建议拼成雪碧图  如果用大图拼成雪碧图的话，加载的慢，反而达不到显示快的效果

css Sprite(雪碧图）的实现原理：

            通过css background-position这个属性来控制的，通常来讲我们设置一个区域的背景图，然后来控制背景图的位置，来实现这个功能

            拼合背景图的小图（x,y）为负值，以左上角的顶点为（0,0）坐标的，当我们需要对坐标系中一个区域进行展示的时候。

雪碧图的实现方式：

         PS手动拼图（小的网站，自己可以动手拼图）

        使用sprite工具自动生成（大型网站）

         CSS sprite 自动生成工具------CssGaga是windows环境下，快速生成雪碧图的工具，这款工具除了帮我们生成雪碧图之外，还会把background-position的代码写好

         网上有安装和配置都有（需要大量的配置，说明很详细）样式

          注意：每个标签都有自己默认的margin和padding；每次都要清除默认样式的原因，自己设置样式的原因是，保证在各个浏览器下的展示效果相同。