学习移动端第一天

一、如何使用字体图标

1.复制相关的文件到fonts文件夹里面

分别为根目录 iconfont.css / iconfont.ttf / iconfont.woff / iconfont.woff2 这4个文件

2.引入css

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

3.使用类名引入字体图标

示例： <span class="iconfont icon-map"></span>

第一个iconfont 是这个盒子的字体图标。

第二个icon-map是告诉这个是用的哪个小图标

4使用unicode编码表达方式引入字体图标

示例：<strong class="iconfont"> &#xe8ab; </strong>

注意：css指定当前标签的文字字体图标必须要声明字体。

示例：strong {
      font-family: 'iconfont';
}

5.使用伪元素字体图标

示例代码：

html 部分 ：   <div class="car1">购物车</div>

css部分：

.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";
}

6.小结

字体图标使用可以整体分为两大步骤：

1. 复制相关文件到网站根目录下，并引入css文件到html页面中。

   • 通常都放到fonts文件夹里面。

   • 通常iconfont.css 和字体放一起。

2. 调用：开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

二、变形 transform（2D）

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

1.位移 translate：translate可以让盒子沿着 x 轴或者 y 轴来移动。

语法：

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

注意：移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

示例：    transform: translateX(100%);

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;
    } 

2.旋转 rotate： 旋转可以让盒子旋转角度。

语法：transform: rotate(45deg);   注意：后面 deg  必须带上！！！

度数为正，则是顺时针旋转；度数为负，则是逆时针旋转；

3.设置中心点 transform-origin

示例：transform-origin: right bottom;      //设置旋转的中心点位置

同时旋转位移时，一定要先写移动再写旋转，css属性书写顺序影响代码执行。

即： transform: translate(-50%, -50%) rotate(360deg);   多个值之间需要用空格隔开。

4.缩放 scale : 使用中心点来进行缩放，不影响其它的盒子。

语法：transform: scale(1.2)；

三、渐变

线性渐变基本语法：

background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));

background-image: linear-gradient(90deg,red,blue);

注意：每个值之间需要使用逗号隔开。