【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化

精灵图

CSS精灵技术：能有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。（主要针对小的背景图片，因为其他图片可能经常更换）

通过background-position移动位置，使用需要的图片。（与常规坐标不同，坐标正方向为x往右，y往下，所以精灵图的使用一般为负值）

需要精确的测量，因为需要精确的移动坐标。

.box {
    /*1.设置一个装图片的盒子，大小为需要显示的图片大小*/
    width: 60px;
    height: 60px;
    margin: 100px auto;
    /*2.装入图片，将图片向左（负值）移动180px显示需要的图片*/
    background: url(images/sprites.png) no-repeat -180px 0;
}

字体图标

主要用于显示网页中通用、常用的一些小图标，是对于工作中图标部分技术的提升和优化。

看起来是图标，本质是文字，可以变换大小、颜色、边距。

字体图标是一些网页常见的小图标，我们直接网上下载即可。

下载网页：

• icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon

• 阿里iconfont字库