CSS基础 精灵图的使用

使用步骤
1.创建盒子

    <div class="one"></div>

  2.使用PxCook量取图标大小，将图标的宽高设置成为盒子的宽高

    

3.将精灵图片设置盒子的背景图片

   background: url('./images/sprites.png')

  4.用PxCook量取小图标的坐标，并取负值给背景图片

    background: url('./images/sprites.png') -80px -70px;

    

注意：1.如果使用伪元素，一定要加content：'';才可使用；伪元素默认是以行内元素显示，需要转块元素或行内块元素，才能设置宽高。

2.给单标签直接设置精灵图是无效的，可以在用div双标签包裹，给div设置精力图，并将其定位到div上