一、字体图标

如果图标库没有项目所需的图标怎么办？ 答：Iconfont网站上传矢量图生成字体图标 1.与设计师沟通，得到SVG矢量图

01.使用字体图标

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

 <span class="iconfont icon-daohangdizhi"></span>

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

使用unicode编码

也可以直接在标签内部放入一个编码

html标签

  <strong> &#xe8ab; </strong>  

css 要指定当前标签的文字是字体图标，必须要声明。

  strong {
       font-family: 'iconfont';
 }

使用伪元素字体图标（记住）

 <div class="car1">购物车</div>

这样结构比较的清晰，省了很多的小盒子

 .car1::before {
     content: '\e8c6';
     color: blue;
     margin-right: 5px;
     font-family: "iconfont" !important;
 }
 .car1::after {
     content: '\e665';
     font-family: "iconfont" !important;
 }

小结

字体图标使用可以整体分为两大步骤：

0. 复制相关文件到网站根目录下，并引入css文件到html页面中。

   • 通常都放到fonts文件夹里面。
   • 通常iconfont.css 和字体放一起。

1. 调用。

   • 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

      <span class="iconfont icon-daohangdizhi"></span>
     

二、平面转换 transform

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

注：X轴右为正向，Y轴下为正向。

语法：

 transform: translate(x, y);
 transform: translateX(x);
 transform: translateY(y);

translate和margin的区别。

-   margin移动盒子**会**影响布局。
-   位移translate移动盒子**不会**影响其他的盒子。不脱标。

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

应用- 盒子水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中。

第一种:
 .father {
     width: 500px;
     height: 500px;
     background-color: pink;
     margin: 100px auto;
 }
 ​
 .son {
     position: absolute;
     top: 50%;
     left: 50%;
   margin-left:-50%;
   margin-top:-50%;
     background-color: skyblue;
 }

第二种:

 .father {
     position: relative;
     width: 500px;
     height: 500px;
     background-color: pink;
     margin: 100px auto;
 }
 ​
 .son {
     position: absolute;
     top: 50%;
     left: 50%;
     /* 百分比，往上走盒子自己高度的一半，往左走盒子宽度的一半 */
     transform: translate(-50%, -50%);
     width: 199px;
     height: 199px;
     background-color: skyblue;
 }

第三种: 使用定位实现子盒子在父盒子里面水平和垂直居中

position:absolute;
left:50%;
top:50%;

旋转 rotate

旋转可以让盒子旋转角度。 一定要写单位！！（deg）

通常配合过渡一起使用

语法：

 transform: rotate(45deg);    

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

   transform-origin: right bottom;

多形态变形小技巧

0. 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。

     transform: translate(-50%, -50%) rotate(360deg);
   

1. 注意，多个值之前用 空格隔开。

缩放 scale

语法：

 transform: scale(1.2)；

它比宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

三、渐变

线性渐变

基本语法：

       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))

四、今日单词

单词	意思	实例
translate	位移	transform:translate(x,y);向x,y轴移动，也可以写单方向，如：translateX(值);
rotate	旋转	transform：ratate(角度）单位是deg。正数是顺时针旋转，负值是逆时针旋转
transform-origin	转换原点	transfo-origin：原点水平位置 原点垂直位置;可用方位名词（left、top等 常用）、像素单位、百分比（参照盒子自身尺寸）。注：谁转换给谁加
scale	缩放	transform:scale(缩放倍数）默认从中心点开始缩放。可以写俩个值分别代表x轴和y轴缩放的倍数。但在工作中一般只写一个值等比例缩放。
transform	变形	transform:translate() scalerotate();注：旋转可以改变坐标轴向，所以必须往后放。

| linear-gradient( | 渐变 | background-image:linear-gradient(颜色1，颜色2)；多种颜色之间用逗号隔开 工作中不会用到纯色，用透明到半透明 如：background-image:linear-gradient(transparent，rgba(0,0,0,.6))