1. 引用字体图标（icon）
icon字体图标优势：
- 字体图标看起来是图，本质是字
- 加载速度快
- 兼容性高
- 灵活性高--通过字体属性控制样式
icon字体图标使用：
- 登录阿里巴巴矢量图标库，然后选择需要的图标，点添加到购物车，然后购物车中添加至项目后， 在项目中下载。
- 下载完成后先进行解压，有3种方式进行使用，最常用最简单的就是先引用下载的icon的css文件，在给需要使用的元素上加一个span等标签，给他的class名字命名为icon图标的"iconfont icon-xx（图标对应的类名）"。
<span class="iconfont icon-map"></span>
注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"
2. 变形 transform（2D）
1. translate可以让盒子沿着x轴或者y轴来移动.
transform: translate(x, y);
2.translate和magin的区别：
- 2.1： margin移动盒子会影响其余的盒子。把其他人挤走。
- 2.2： 位移translate移动盒子不会影响其他的盒子。不脱标。
注意：移动的时候可以写百分比，如果使用的百分比，移动的是盒子**自身的宽度**
3. 应用- 盒子水平和垂直
- 3.1 方法一：
使用平移
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(-50%, -50%);
}
- 3.2 方法二：
使用magin的方法进行垂直水平居中
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
margin:-50px -50px;
}
- 3.3 方法三：
通过定位上下左右都是0，实现垂直水平居中
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
}
4. 旋转（rotate）:
使用方法：transform: rotate(45deg); 一定写单位
如果是正度数，则是顺时针旋转
5. 设置旋转中心点 (transform-origin)
transform-origin: right bottom;(右下角旋转)
如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
实例：transform: translate(-50%, -50%) rotate(360deg);
6. 缩放 (scale):
transform: scale(1.2)；
它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。
3. 渐变
1.线性渐变(inear-gradient)
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
