一，字体图标
1，下载字体图标：
登录iconfont（https://www.iconfont.cn/）
搜索需要的图标
将需要的图标添加入库（购物车图标）
点击右上角购物车图标
选择下方添加至项目（没有项目选择新建项目再添加）
在项目界面点击下载至本地
最后将文件解压，且重命名文件夹为"iconfont"，放到代码根目录
2，字体图标引用
一般用 i 标签来承载字体图标
①本地引用：
用link标签选择iconfont文件夹里的iconfont.css
②在线引用（不推荐）
用link标签挂上项目中的在线链接，注意连接前面需要加上http
3，字体图标的属性修改
字体图标的本质是文字，可以直接用font-zise，color修改大小和颜色
但是要注意，不要直接使用默认类名，应该再给 i 标签添加一个类名如：icon1
二，平面转换（transform）
平面转换主要有：
transform: translate(-50%, -50%);————平移
transform:rotate(-360deg);————旋转
transform: scale(1.2);————缩放
0，转换中心——transform-origin
元素转换默认以元素正中心为原点，可根据需要改变。
如 transform-origin：left bottom；
表示转换中心变更为元素左上角
如 transform-origin：50px 50px；
表示转换中心变更为（以左上角0px 0px为原点计算）50px 50拼px。
1，平移translate
x轴正方向朝右，y轴正方向朝下。
如果用百分比，则以自身为参照。
也可以用具体像素值，则以原来的位置为参照。
如果用方位名词：left，right，center，bottom，top，则以父盒子为参照
2，旋转rotate
旋转一定要带单位deg，负号表示逆时针旋转。
3，缩放scale数值小于1表示缩小，大于1表示放大。
三，渐变linear-gradient( );
渐变指背景色渐变
background-image: linear-gradient(36deg, #59C173, #a17fe0, #5D26C1);
其中36deg可省略，意为渐变方向，默认值为180deg，180deg表示6点钟方向，即从上往下渐变，
也可以使用方位名词，如right表示向右（从左往右）渐变。
四，回顾
1，子绝父相：图层覆盖显示，常用子绝父相完成。
2，p::after{}，此为伪元素，默认为行内元素无法设置宽高，且必须要添加content属性
3，超出显示范围需要隐藏元素，用 overflow: hidden;（不占位置）
4，多种平面转换需要进行连写，否则会被覆盖：
transform: translateX(600px) scale(1.2);
5，旋转会导致元素方向改变（x轴，y轴），连写时先旋转再平移和先平移再旋转效果不一样。
6， transition: 1s;——表示花费1秒时间来过渡，谁过渡写在谁的选择器里面
7，p:hover::after{}——表示当鼠标移到p上时，p里面的为元素p::after状态改变，若需求是鼠标移动到p的父级.box时，则为：.box:hover p::after{}——（hover和p之间有一个空格）
