字体图标
引入字体图标用link引入iconfont.css
<link rel="stylesheet" href="./fonts/iconfont.css">
1.使用类名引入字体图标
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
<span class="iconfont icon-daohangdizhi"></span>
- 第一个类名
iconfont
目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。 - 第二个类名
icon-daohangdizhi
, 告诉盒子到底使用哪个小图标。
2.使用unicode编码
也可以直接在标签内部放入一个编码
html标签
<strong>  </strong>
css 要指定当前标签的文字是字体图标,必须要声明。
strong {
font-family: 'iconfont';
}
3.使用伪元素字体图标
<div class="car1">购物车</div>
.car {
width: 200px;
height: 45px;
border: 1px solid pink;
text-align: center;
line-height: 45px;
font-family: 'iconfont';
}
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";
}
变形transform
1.位移translate
translate可以让盒子沿着x轴或用轴来移动
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
translate和margin的区别:
margin移动盒子会影响其余的盒子,把其他人挤走
位移translate移动盒子不会影响其他盒子.不脱标
移动的数值如果是百分比,移动的是盒子自身的宽度
2.盒子水平垂直居中
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
transform: translate(-50%, -50%);
}
/* .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background-color: skyblue;
} */
3.旋转rotate
旋转可以让盒子旋转角度
transform: rotate(45deg); 一定写单位
如果是正数,就是顺时针旋转
如果是负数,就是逆时针旋转
4.设置中心店 transform-origin
设置旋转的中心位置
transform-origin: right bottom;
5.缩放
transform: scale(1.5);
6.倾斜
transform: skew(60deg);