CSS（视频里鼠标经过显示遮罩，CSS高级技巧，精灵图，字体图标）

视频经过显示遮罩
核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。
遮罩的盒子不占有位置，就需要用绝对定位和display配合使用

.shipin:hover .mask{
    display:block;
}

CSS高级技巧

精灵图
精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
精灵图sprites的使用
使用精灵图的核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites 精灵图 或者 雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片x和y坐标，注意网页中的坐标有所不同
5.因为一般情况下都是往下往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：
1.精灵图主要针对于小的背景图片使用
2.主要借助于背景位置来实现-background-position
3.一般情况下精灵图都是负值，（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。

字体图标

字体图标的产生
使用场景：主要用于显示网页中通用，常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显
1.图片文件还是比较大的
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂

字体图标能很好的解决上述问题
字体图标为前端工程师提供了一种高效的图标使用方式，展示的是图标，本质属于字体。

优点：
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
兼容性：几乎支持所有的浏览器
⚠️：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图片的下载
icomoon字库 http://icomoon.io
阿里icofont字库http://www.iconfont.cn/

字体图标的引入
1.把下载包里面的fonts文件夹放入页面根目录下
2.在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到页面中，一定要注意字体文件路径的问题。
font-family：‘icomooon’；