盒模型-雪碧图

by lai chendong

HTML

<p>
雪碧图：是一种减少http请求数来加速页面渲染的性能优化方式。因为一个图标本身体积非常小，每个图标都一次网络请求，太浪费了。
想象“盒子”是个透明的框，背景图片在下面移动。就是雪碧图：sprite img 的原理
</p>
<div class="icon-box icon-1">
我是个图标
</div>
<div class="icon-box icon-2">
我是另一个图标
</div>
<div class="icon-box icon-3">
我是一个失败的雪碧图
</div>

CSS

.icon-box{
  width:48px;
  height:48px;
  text-indent:-300px;
  
  
  background: #ccc url(//misc.360buyimg.com/mtd/pc/index_2017/2.0.0/static/images/[email protected])
  no-repeat 0 0;
  
  border:1px solid #ccc;
  margin:10px;
}

.icon-1{
  background-position: 0 0;
}
.icon-2{
  background-position: -53px -53px;
}
.icon-3{
  background-position: -27px -80px;
}