字体图标

展示的是图标，本质是字体；处理颜色比较单一的图标

特点：

1. 灵活的修改样式
2. 渲染快，体积小
3. 兼容性高

字体图标的下载

www.iconfont.cn/ 下载至本地

字体图标的引用link

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

字体图标的类名

 <!-- class：“iconfon+自带类名” -->
 <i class="iconfont icon-gouwuche"></i>

字体图标unicode用法

  <link rel="stylesheet" href="./fonts/iconfont.css">
 <span class="iconfont ">&#xe626;</span>

字体图标伪元素用法

1. 声明字体图标 font-family: "iconfont";
2. content：“\保留后四位”

平面转换

平面转换的属性：transform

位移

1.写法：

1. transform：translate(x,y)
2. transform：translateX()
3. transform：translateY()

2.取值:

数值|百分比(正负都行)

1. x:表示水平---x轴正值方向为右
2. y:表示垂直---y轴正值方向为下

位移和margin的区别

1. margin参考的是父盒子会影响其他盒子
2. translate参考的是自身盒子，不会影响其他盒子，类似相对定位不脱标

旋转

• 写法：transform：rotate(deg) 单位-deg

• 转换中心点：transform-origin：水平位置 垂直位置 / center right

多重转换

如果有位移又有旋转先写位移 语法transform-translate(X,Y)空格 rotate(360deg) 先位移再旋转

缩放

语法：trantion：scale(1.1)代表是缩放大原来的1.1倍

渐变

语法：backgorud:linear-gradlient(red,blue)默认值to bottom,

透明渐变:background:linear-gradient(transparent,rgb(0,0,0,0.5))

额外知识点

单行文本溢出显示省略号

                /* 一行显示 */
            white-space:nowrap;
                  /* 溢出隐藏*/
            overflow: hidden;
            /* 超出的用省略号显示 */
            text-overflow: ellipsis;