CSS基础知识汇总{主要内容：精灵图、滑动门、web字体、图标字体}

一、精灵图
精灵图作用： ◆用来设置背景图片的。◆提高网页加载速度
步骤：
◆先将精灵图作为背景图片设置给容器
◆通过background-position 移动精灵图的位置
备注：
◆精灵图移动的位置是依据图片的横坐标和纵坐标来的
◆在设置坐标值的时候，记住需要设置为负数。
二、滑动门
☞作用： 使用滑动门制作网页导航。
☞注意事项：
◆滑动门导航必须使用背景图片
◆滑动门导航不能设置固定宽度
三、web字体
iconfont中有在线字体如下：里面有使用步骤
https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index
但是发现这种方式不通用
使用如下方法：
在找字网上下载字体，使用步骤如下：
第一步先申明字体：

第二步标签通过选择器的方式使用字体。
完整精简版使用如下：

四、图标字体
在iconfont中找官方图标库—加入购物车—下载代码—查看使用方法
☞ 先定义
☞ 通过选择器调用