前端基础之JS前置基础

一、字体图标

使用字体图标（重点）

引入相关文件（前提）

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

2. 引入 css

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

使用类名引入字体图标（重点记住）

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

<span class="iconfont icon-daohangdizhi"></span>

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

二、 变形transform(2D)

（1）位移translate

translate可以使得盒子沿着X或者Y轴进行移动

语法为：

transform：translateX（多少px）         

transform：translateY（多少px）

直接写由于CSS的层叠性，会覆盖

可以简化为transform：translateX（多少px）   translateY（多少px）；

注意：px为单位，必须要写,如果写百分比，就是以自身宽为百分比移动，例如50%就是移动自身宽或者高度的50%

和margin的区别：

margin移动盒子的时候会将附近的盒子挤开，但是translate不会，也不脱标

应用：可以使得一个盒子在其父盒子居中

语法：

left：50%

top：50%

transform: translate(-50%, -50%);

（2）旋转rotate

旋转可以使得盒子围绕一个点进行旋转，方向由设置的角度决定

语法：transform: rotate(45deg);   

注意：deg单位移动要写

如果是正方向，则为顺时针旋转，反之则逆时针

旋转的时候元素的X轴和Y轴也会跟着旋转

旋转可以和位移同时使用，但是必须要先写位移，如果先写旋转，会出现很好玩的现象，原因是旋转时X轴的变化使得转出了一个很有意思的圈。

（3）缩放scale

可以使得盒子放大或者缩小的属性

优点：放大时不会影响附近的元素，不会挤走别盒

缩放的时候是从中心点缩放的

语法：

transform：scale（X）

X为倍数，不用加单位。

X小于1,则为缩小，反之则变大

通常我们会配合overflow：hidden使用来隐藏从盒子溢出的图像

（4）线性渐变linear-gradient

基本语法：

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

可以从一个颜色渐变为另一个颜色，颜色的种类用，（逗号）隔开