1.字体图标的使用
1.1前提是先引入相关文件,在根目录添加fonts文件夹
<link rel="stylesheet" href="./fonts/iconfont.css">
1.2使用类名引入字体图标(重点)
<span class="iconfont icon-daohangdizhi"></span>
- 第一个类名
iconfont目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。 - 第二个类名
icon-daohangdizhi， 告诉盒子到底使用哪个小图标。
1.3使用unicode编码引入字体图标(了解)
<strong class="iconfont">  </strong>
css 要指定当前标签的文字是字体图标，必须要声明。
strong { font-family: 'iconfont'; }
1.4使用伪元素引入字体图标(掌握)
<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"; }
注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"
2.平面转换 transform
2.1平面转换-位移translate
transform: translate(x, y);
- x轴向右是正值,y轴向下是正值
- 位移translate移动盒子不会影响其他的盒子。不脱标。
- 移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
- 盒子水平和垂直居中的三种方法: A.绝对定位left:50%和top:50%,之后设置margin-left:-50%;margin-top:-50%;
B.绝对定位left:50%和top:50%之后设置translate(-50%, -50%)
C.绝对定位之后四边设置0边界值,再添加margin:auto
2.2平面转换-旋转rotate
transform: rotate(45deg); 一定写单位
- 数值是正数是顺时针转动,负数是逆时针转动
- 设置中心点 transform-origin,取值是方位名词
- 位移和旋转连写 transform: translate(-50%, -50%) rotate(360deg);
- 先写移动后旋转,不同的属性值用空格隔开
2.3平面转换-缩放scale
transform: scale(1.2)；
- 用中心点来进行缩放的，不会影响其他的盒子。正值放大,负值缩小
3.渐变linear-gradient
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
-
默认是to bottom 从上到下,角度180度,单位是deg
