一 iconfont（字体图标）使用方法
1 引入字体图标的css
2 引入标签，加类名
i{ color: skyblue; font-size: 500px !important; }二 使用类名引入字体图标（重点记住）
如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）
第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。
三 使用unicode编码 也可以直接在标签内部放入一个编码
html标签
- 第一步引入对应的css文件
- 准备标签，将对应的字体图标的名字复制到双标签的中间 &#xxxx;
四 使用伪元素字体图标（记住） 结构比较的清晰，省了很多的小盒子 例如 .car { width: 200px; height: 45px; border: 1px solid pink; text-align: center; line-height: 45px; font-family: 'iconfont'; } .car::before { content: "\e63b";
} .car::after { content: "\e686"; } 注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"
总结： 字体图标是前端工程师必须具备的知识点。 开发中， 字体图标上传，选择，都是网页美工给我们准备好了。
我们重点是下载和使用。
字体图标使用可以整体分为两大步骤：
-
复制相关文件到网站根目录下，并引入css文件到html页面中。
通常都放到fonts文件夹里面。 通常iconfont.css 和字体放一起。 2.调用。
开发中最常用的是使用类名来调用，所以重点记住这个就可以了。
变形（2D） 变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）
- 位移 translate translate可以让盒子沿着x轴或者y轴来移动。 语法： transform: translate(x, y); transform: translateX(x); transform: translateY(y);
他和margin的区别。
margin移动盒子会影响其余的盒子。把其他人挤走。 位移translate移动盒子不会影响其他的盒子。不脱标。
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
让盒子水平和垂直 .inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: skyblue; transform: translate(-50%, -50%); }
.inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; background-color: skyblue; }
旋转 旋转可以让盒子旋转角度。 transform: rotate(45deg); 一定写单位
如果是正度数，则是顺时针旋转 如果是负度数，则是逆时针旋转
设置中心点 transform-origin
设置旋转的中心点位置 transform-origin: right bottom;
多形态变形小技巧
如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。 transform: translate(-50%, -50%) rotate(360deg);
缩放 scale transform: scale(1.2)； 它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子
渐变 基本语法：background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
