1. 字体图标
1.1 优点：
- 灵活性：灵活的修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便
1.2 目标：
使用字体图标技巧实现网页中简洁的图标效果
1.3 图标库：
Iconfont：www.iconfont.cn/ 阿里巴巴字体库 (常用)
下载字体包（了解）
-
登录（新浪微博）---选择图标库---选择图标，加入购物车---购物车---添加至项目---下载至本地
复制地址前面要加上http：
iocnxxx.css
根据美工给的下载保存在fonts跟imanges里
引入字体图标方法
离线{下载资源包，link引入图标
1.class类名
2.编码
3.伪元素content使用
}
在线{link引入编码(三种也可)}
也可以在资料库（阿里库）里面直接用链接插入
content：
后面跟‘ 加内容 ’
transform:变形 translate：定位X、Y轴下、右为负。
图片缩放（transform:scale)
位移移动
translate可以让盒子沿着x轴或者y轴来移动。
语法：
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
问题：
- 他和margin有啥区别。
- margin移动盒子会影响其余的盒子。把其他人挤走。
- 位移translate移动盒子不会影响其他的盒子。不脱标。
- 位移经常需要的场景：
- 比如 盒子上下移动不影响其他盒子
- 盒子水平和垂直居中，写法简单
- 轮播图的动画效果
- 移动的时候可以写百分比，如果使用的百分比，移动的是盒子**自身的宽度
当一个大盒子里有多个小盒子使用margin bottom或者top的时候，
里面的盒子会因为站位跟着一起移动（尤其是自后一个盒子会带动整体，
第三个盒子会带动前两个）
这个单个移动法则不适合实际操作，还是整体移动比较好
