比如页面上使用到很多icon的图，如果页面一张张去请求这些图片的时后那http请求就会很多，这时候把这些图片合并为一张的话，页面就只需要加载一次了，减少了http请求带来的性能消耗；如下图：
图片整合原则：
1）边切图边整合。
2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
4）单张整合好的sprite图片在100KB以内。
5）按分类整合图片。
6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。
实现代码：
sprite精灵图使用
带你手写一个轮播图之HTML结构和CSS布局设计
在前端项目开发中，大家可能多少都有用到过轮播图。一般为了省事，我们会使用现成的库，比如swiper。当然，很多组件库也带有轮播图组件，比如element-ui的ElCarousel组件。但是，有多少童鞋曾思考过其实现原理呢？又有多少童鞋尝试过手写一个呢？
其实，实现一个轮播图相当简单，我打算出一个大约3节的连载教程，教大家怎样一步一步实现轮播图。今天，我们先讲解结构和布局的设计。
首先，我们创建一个项目文件夹carousel-demo，在该目录下新建images文件夹和index.html，main.js，style.css三个文件。然后，大家找3张相同尺寸的banner图和2个相同尺寸的小图标放入images文件夹。我用的banner图尺寸是1280*720，文件名分别是1.jpg，2.jpg，3.jpg；我用的图标尺寸是32*32，文件名分别是left.png和right.png。
最终，我们实现的轮播图界面长这样，大家说漂不漂亮？
接下来，我们打开index.html文件，先创建一个基本的骨架，并引入我们刚才创建的css和js文件，代码如下：
Carousel demo
我们的轮播图需要一个外层容器元素，该元素包含一个banner列表，一个指示器和一组左右导航按钮。由于默认显示第一张图片，所以我们给第一个指示器项添加了一个active类。代码如下：
现在，我们打开style.css文件，首先对默认样式做一些重置，将所有元素的内外边距设为0，盒模型设为边框盒。为了去掉li元素前面的小圆点，我们将li元素的list-style设为none。样式如下：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}接下来，我们从外到内，从上到下为元素定义样式。
首先，我们定义外层容器元素的样式。为了使布局更灵活，我们先给它指定一个最大宽度，并让其在水平方向居中。由于它的子元素需要堆叠，我们给它设置相对定位，让子元素相对于它来定位。由于我们的banner列表有多张图片，可以左右滚动，每次仅一张图片可见，所以需要将不可见的图片裁掉。样式如下：
.carousel-wrapper {
max-width: 800px;
margin: auto;
position: relative;
overflow: hidden;
}接下来，我们定义banner列表和其子元素样式。我们的banner列表有3张图片，可以左右滚动，每次仅显示一张，所以banner的宽度与容器一样，banner列表宽度是容器的3倍。
我们将banner列表元素显示为弹性盒，以让所有banner在一行排列显示。由于弹性盒子元素会均分空间，而我们的banner图宽度相同，所以不需要设置banner的宽度，仅将banner内的img元素宽度设为100%即可。
我们也为banner列表添加了过渡属性，当使用JS动态改变变换值的时候会有动画效果。样式如下：
.slides {
width: 300%;
display: flex;
transition: transform .3s;
}
.slide-item img {
display: block;
width: 100%;
}下面，我们定义指示器样式。我们的指示器需要在banner列表上层底部居中显示，我们使用left和X轴平移变换结合实现水平居中，全部样式如下：
.indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex; // 弹性盒，让子元素在一行显示
padding: 5px;
border-radius: 10px;
background-color: rgba(255, 255, 255, .3);
pointer-events: none; // 阻止指示器容器成为指针事件目标
}
.indicator-item {
pointer-events: all; // 让指示器子元素可以成为指针事件目标
cursor: pointer;
width: 30px;
height: 6px;
margin: 0 4px;
border-radius: 6px;
background-color: #999;
}
.indicator-item.active { // 为活动指示器项设置一个不同的样式
background-color: #ccc;
}最后，我们定义导航按钮样式。我们的导航按钮需要在banner列表上层两边垂直方向居中显示，我们使用top和Y轴平移变换结合实现垂直居中，全部样式如下：
.nav li {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .3);
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
}
.nav-left {
left: 0;
background-image: url(images/left.png);
}
.nav-right {
right: 0;
background-image: url(images/right.png);
}
