精灵图（雪碧图）的用法

之前一听到别人说，雪碧图（精灵图）感觉这逼格很高啊，之后，自己看了看，做个demo

用雪碧图之后，优点还是有的，减少了浏览器对服务器的请求，提高了加载的速度，也易于后期的修改，维护

.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {
float: left;
width:100px;
height: 100px;
background: #666 url(18.png) no-repeat;
margin-left: 10px;
}

.box1{background-position: -300px 0;position:absolute; top:200px;}
.box2{background-position: -200px 0;}
.box3{background-position: -100px 0;}
.box4{background-position:top left;}
.box5{background-position: 0 -100px;}
.box6{background-position: 0 -200px;}
.box7{background-position:bottom left;}
.box8{background-position:-300px -200px;}
.box9{background-position:bottom right;}