一、字体图标的五种引入方式:

1.在矢量图标库中下载图标,在title标签后用link引入.

引入后,写上一个标签[一般使用i标签或者em标签],再给标签加上固定类名.iconfont.

再获取矢量图的对应类名,也可以为其添加字体样式.

<link rel="stylesheet" href="./iconfont/font/iconfont.css">
    <style>
        .icon-shenghuofangshi{
            color: cornflowerblue;
            font-size: 1000%;
        }
        div{
            width: 500px;
            height: 500px;
            border:2px solid #000;
            text-align: center;
            line-height: 500px;
            margin: 200 auto;
        }
    </style>
</head>
<body>
    <div>
        <i class="iconfont icon-shenghuofangshi
    "></i>
    </div>
</body>

2.在矢量图标库中下载图标,在title标签后用link引入.

引入后,写上一个标签[一般使用i标签],再给标签加上固定类名.iconfont.

获取字体图标的编码,将编码复制到双标签中间当内容显示.

3.js引入,可以引入彩色图标,其他引入方式没有彩色效果.

4.此外还有一种特殊的引入方式,使用伪元素引入字体图标

第一步还是使用link引入css,再写入一个标签加入固定iconfont类名

加入伪元素,在伪元素content:' '中添加特殊编码.特殊编码可以打开css文件查看

5.线上引入方式

二、transform平面转换(2D)

1.transform平移

transform:translate(100px,100px)[逗号隔开]

前面是x轴,后面是y轴,x轴负数向左位移,正数向右位移,y轴负数向上位移,正数向下位移.

*位移-绝对定位居中

1.给父盒子添加相对定位,子盒子添加绝对定位,也就是子绝父相.先让小盒子移动大盒子的一半,再以相反方向移动小盒子自身的一半.

  .box{
            position: relative;
            width: 800px;
            height: 800px;
            background-color: blanchedalmond;
            margin: 0 auto;
        }
        .one{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

2.先让盒子脱离标准流,再使用margin:auto将盒子四个方向都改为自适应即可实现盒子的快速居中.