字体图标的用法

字体图标，颜色单一的小图标可以用字体图标来实现，具体代码写法如下：

<!-- 第一步 ，引入字体图标的CSS -->

<link rel="stylesheet" href="./fonts/iconfont.css">

<!-- 第二步，引入标签加类名 -->

<i class="iconfont icon-auto "></i>

要记得权重的问题

<style>

i {

font-size: 50px !important;

/* 加important提升权重 */

color: blue;

}

</style>

总共有三种用法 都差不多，现阶段记住类名这个用法就可以了

接着讲讲盒子的2d形态

盒子的移动 代码为 ：transform: translate( 200px 200px); 单位可以用像素和百分比；transform移动盒子是以自己为参照物移动的是自己的大小，X轴往右是正 往左是负 y轴往上是负 往下是正

盒子的旋转，代码为：transform: rotate(10turn);旋转单位deg, 360deg是转一圈 1turn=360deg

盒子旋转的中心： transform-origin: right bottom; 是以方位名词为单位

盒子的缩放 代码为： transform: scale(2);transform: scale(X轴缩放, Y轴缩放)一般写一个值代表等比例缩放, 后面的值是不带单位的 ,表示倍数

扩展知识 盒子的倾斜 代码为：transform: skew(-45deg, 90deg);skew倾斜 第一个值X轴倾斜 第二个值Y轴倾斜 单位值是deg

 然后在讲一下渐变色 ：最常用的一种 从上到下变透明，代码为：background-image: linear-gradient(transparent, rgba(0, 0, 0, .5)); （其余几种渐变色的代码:

                linear-gradient线性渐变 ，默认色是从上到下

            background-image: linear-gradient( red, yellow, green);

            可以通过一个to属性和方位名词来改变渐变色的方向

            background-image: linear-gradient( to right, red, yellow);

            角度渐变

            background-image: linear-gradient(45deg, red, yellow);)