CSS 精灵（雪碧图、精灵图）

概述：

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

精灵图的原理

将页面中的背景图合并成一张图片
利用背景属性，使不同元素显示图片的不同部分

实现步骤：

(1)通常要限定容器大小
(2)图片拼合
(3)背景定位

优缺点
优点

（1）减少网页的 http 请求，从而大大的提高页面的性能；
（2）图片命名上的困扰；
（3）更换风格方便。

缺点

（１）必须要限定容器大小
（２）需要计算位置。

- 应用场景：适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。
生成工具：https://www.toptal.com/developers/css/sprite-generator/

等高布局

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧