Web前端进阶

一、字体图标-iconfont

目标：使用字体图标技巧实现网页中简洁的图标效果

1、使用字体图标-类名：

（1）引入字体图标样式表

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

(2)调用图标对应的类名，必须调用2个类名

• iconfont类：基本样式，包含字体的使用等

• icon-xxx:图标对应的类名

//挑选相应图标并获取类名，应用于页面
<span class="iconfont icon-xxx"></span>

注：下载颜色和结构都简单的字体图标，带颜色、插图的不要，复杂的都用css精灵图

2、上传矢量图

当图标库没有项目所需的图标时，就往iconfont网站生成字体图标

(1)与设计师沟通，得到SVG矢量图

(2) lconFont网站上传图标，下载使用

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等

注意：平面转换要加上过渡属性才能看见变化过程

//过渡
transition:all .5s;

1、平面转换

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

• 2D转换

2、位移

//使用translate实现元素位移效果
transform:translate(x,y);

（1）取值（正负均可）

• 像素单位数值

• 百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

（2）技巧

• translate()如果只给出一个值，表示X轴方向移动距离

• 单独设置某个方向的移动距离：translateX()&translateY()

3、旋转

transform:rotate(角度);//角度单位deg,取值为正：顺时针旋转；取值为负：逆时针旋转

（1）使用transform-origin属性改变转换原点

transform-origin:原点水平位置 原点垂直位置//默认原点是盒子中心点

（2）取值

• 方位名词（left、top、right、bottom、center)

• 像素单位数值

• 百分比（参照盒子自身尺寸计算）

4、多重转换

目标：使用transform复合属性实现多形态转换

transform:translate(600px) rotate(360deg);//边走边转
transform:rotate(360deg) translate(600px);//旋转可以改变坐标轴向，会乱跑

层叠性：

//transform的层叠性
transform:translate(600px);
transform:rotate(-360deg);//属性层叠，下面的生效

5、缩放

transform:scale(x轴缩放倍数，y轴缩放倍数）

（1）技巧：

• 一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

• transform:scale(缩放倍数);

• scale值大于1表示放大，小于1表示缩小

三、渐变

1、渐变背景

• 渐变是多个颜色逐渐变化的视觉效果

• 一般用于设置盒子的背景

//使用background-image属性实现颜色1到颜色2的渐变背景效果
background-image:linear-gradient{
  颜色1，
  颜色2
};
//background-image实现透明到某颜色的渐变效果
background-image:linear-graient{
  transparent,
  rgba(0,0,0,.6)
};

四、空间转换（3D转换）

1、 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

（一）空间位移

1、语法

• transform:translate3d(x,y,z);

• transform:translateX(值);

• transform: translateY(值);

• transform: translateZ(值);

2、取值

• 像素单位数值

• 百分比

3、透视

（1）属性（添加给父级）

perspective:值;//取值为像素单位数值，数值一般在800-1200

（2）作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

（3）透视距离： 视距，就是人的眼睛到屏幕的距离。

（二）空间旋转

//使用rotate实现元素空间旋转效果
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

1、左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

2、拓展

• rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

• x，y，z 取值为0-1之间的数字

（三）立体呈现

1、呈现立体图形步骤

（1）盒子父元素添加transform-style: preserve-3d；(为子元素创造一个3D的空间）

（2）按需求设置子盒子的位置（位移或旋转）

注意： 空间内，转换元素都有自已独立的坐标轴，互不干扰

（四）空间缩放

//使用scale实现空间缩放效果
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

五、动画

1、过渡 VS 动画

• 过渡可以实现2个状态之间的变化过程

• 动画可以实现多个状态间的变化过程，动画过程可控(重复播放、最终画面、是否暂停)

2、动画基础概念

• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

• 构成动画的最小单元：帧或动画帧

3、实现步骤

（1）定义动画

注：动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代，即from{}；

（2）使用动画

//使用animation添加动画效果
animation: 动画名称 动画花费时长；

4、动画属性

（1）复合属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

注意：

• 动画名称和动画时长必须赋值

• 取值不分先后顺序

• 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性取值：

• 速度曲线：

• linear 匀速运动 时间太短效果不明显，不常用

• steps(n) 分步动画 把动画分成n等份执行

• 延迟时间（控制动画的先后出场顺序）：

• ns 1s 2s......

• 重复次数：

• 数字 写什么数字就重复几次

• infinite 无限循环

• 动画方向：

• alternate 执行完再慢慢反着执行回初始状态

• 执行完毕时状态：（测试时要去掉infinite和alternate）

• backwards 默认值,动画停留在最初的状态

• forwards 动画停留在结束的状态

（2）拆分写法（了解）

//鼠标移入.box盒子的时候暂停动画
.box:hover{
  animation-play-state:paused;
}

5、逐帧动画

（1）补间动画：两个状态之间的过程完完全全地补充出来（常用）

（2）逐帧动画：两帧之间地动画不进行补充（帧动画，配合精灵图实现动画效果）

animation-timing-function:steps(N);//将动画过程等分成N份

（3）精灵动画制作步骤

1. 准备显示区域

• 设置盒子尺寸是一张小图地尺寸，背景图为当前精灵图

2. 定义动画

• 改变背景图的位置（移动的距离就是精灵图的宽度）

3. 使用动画

• 添加速度曲线steps(N),N与精灵图上小图个数相同

• 添加无限重复效果

6、多组动画

精灵动画的同时添加盒子位移动画

六、移动端特点

1、移动端和PC端不同点

• PC屏幕大，网页固定版心

• 手机屏幕小， 网页宽度多数为100%

2、 使用浏览器模拟器调试移动端网页

3、分辨率

• 硬件分辨率（出厂设置）

• 缩放调节的分辨率（软件设置）

4、 分辨率分类

• 物理分辨率是生产屏幕时就固定的，它是不可被改变的

• 逻辑分辨率是由软件（驱动）决定的 -----制作网页所参考的分辨率

5、视口：

(1)概念：显示HTML网页的区域，用来约束HTML尺寸

• 手机屏幕尺寸都不同， 网页宽度为100%

• 网页的宽度和逻辑分辨率尺寸相同。 ----- 默认 网页的宽度和逻辑分辨率不相同

• 默认 网页宽度是980px

(2)标签

//使用meta标签设置视口宽度，制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport:视口

widrh=wevice-width:视口宽度=设备宽度

initial-scale=1.0"缩放1倍（不缩放）

（3）二倍图

七、百分比布局

• 百分比布局，也叫流式布局

• 效果：宽度自适应，高度固定

//百分比布局，流式布局
width：100%；
height:50px;

八、Flex布局

(一）概念

(1)Flex x布局/弹性布局

• 是一种浏览器提倡的布局模型

• 布局网页更简单、灵活

• 避免浮动脱标的问题

（2） 作用

• 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

• Flex布局非常适合结构化布局

（3）设置方式

• 父元素（亲爹）添加 display: flex，子元素可以自动的挤压或拉伸

（4）组成部分

• 弹性容器

• 弹性盒子

• 主轴

• 侧轴 / 交叉轴

（5）默认效果

• 视觉效果: 子级一行排列/水平排列

• 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列

(二）对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

I.主轴对齐方式

（1）修改主轴对齐方式属性：justify-content

//修改主轴对齐方式属性: justify-content
/* 居中 */
justify-content: center;

/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;

/* 所有地方的间距都相等 */
 justify-content: space-evenly;

/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;

II .侧轴对齐方式

(1) 修改侧轴对齐方式属性:

• align-items（添加到弹性容器）

• align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

III.伸缩比

属性

• flex : 值;

取值分类

• 数值(整数)

注意 : 只占用父盒子剩余尺寸

//使用flex属性修改弹性盒子伸缩比
 .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }
.box div:nth-child(3) {
            flex: 1;
        }

(三）主轴方向

I.修改主轴方向

• 主轴默认是水平方向, 侧轴默认是垂直方向

• 修改主轴方向属性: flex-direction

//使用flex属性修改弹性盒子伸缩比 
display: flex;
/* 1. 先确定主轴方向; 
2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
 /* 修改主轴方向: 列 */
 flex-direction: column;

 /* 视觉效果: 实现盒子水平居中 */
 align-items: center;

/* 视觉效果: 垂直居中 */
 justify-content: center;

II.弹性盒子换行

1. 弹性盒子换行显示 : flex-wrap: wrap;

2. 调整行对齐方式：align-content

• 取值与justify-content基本相同 (没有space-evenly)

//使用flex-wrap实现弹性盒子多行排列效果
 
display: flex;

 /* 默认值, 不换行 */
 /* flex-wrap: nowrap; */

 /* 弹性盒子换行 */
flex-wrap: wrap;

/* 调节行对齐方式 */
 /* align-content: center; */
 /* align-content: space-aroun   */  
align-content: space-between;

九、移动适配

（一）长度单位

I.rem

（1）rem介绍

• 相对单位，相对于HTML标签字号计算尺寸

• 1rem =1HTML标签字号

（2）基本使用

1. 给HTML标签添加字号

2. 设置元素尺寸为rem单位

（3）媒体查询

[1]作用

• 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

• 当某个条件成立, 执行对应的CSS样式

[2]基础使用

@media (width:375px）{
  html{
    font-size:40px;
  }
}

（4）rem适配原理

rem单位尺寸

[1]. 根据视口宽度，设置不同的HTML标签字号

[2]. 书写代码,尺寸是rem单位

2.1 确定设计稿对应的设备的HTML标签字号

• 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

2.2 rem单位的尺寸

• N * 37.5 = 68 → N = 68 / 37.5

• rem单位的尺寸 = px单位数值 / 基准根字号

(5)rem布局流程

【1】媒体查询添加根字号（方法1）

@media (width:375px）{
  html{
    font-size:37.5px;
  }
}

【2】flexbile添加根字号（方法2）

<script src="flexbile.js"></script>

II.vw/vh

(1）vw/vh介绍

• 相对单位，相对视口的尺寸计算结果

• 1vw=1/100视口宽度

• 1vh/100视口高度

（2）vw适配原理

1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
   Ø 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度

注意：vw和vh不要混用， vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

十、Less

（一）Less介绍

• Less是一个CSS预处理器, Less文件后缀是.less

• 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

（二）编译插件

• Easy Less :

• vscode插件

• 作用：less文件保存自动生成css文件

（三)Less语法

（1）注释

【1】单行注释 // ctrl+/

【2】多行注释 /* */ shift +alt+A

（2）运算

• 加、减、乘直接书写计算表达式

• 除法需要添加 小括号 或 .

（3）嵌套

【1】作用

• 快速生成后代选择器

【2】语法

【3】 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

（4）变量

【1】定义变量：@变量名：值；

【2】使用变量：CSS属性：@变量名；

（5）导入：@import "文件路径";

（6）导出

【1】 配置EasyLess插件， 实现所有Less有相同的导出路径

配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

【2】 控制当前Less文件导出路径

（7）禁止导出

在less文件第一行添加：//out:false

十一、响应式

（一）媒体查询

（1）开发常用写法

• 媒体特性常用写法

• max-width

• min-width

（2）书写顺序

• min-width(从小到大）

• max-width(从大到小）

（3）外链式引入

（二）BootStrap

（1）UI框架

【1】概念

将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

【2】作用

基于框架开发，效率高，稳定性高。

（2）了解BootStrap

【1】中文网：https://www.bootcss.com/

【2】封装了大量的HTML、CSS、JavaScript,只需要按照框架要求书写 代码，即可快速完成对应的效果

（3）使用步骤

【1】下载：首页--->BootStrap中文文档--->下载BootStrap

【2】使用

1. 引入 ：BootStrap提供的CSS代码

2. 调用类 ：使用BootStrap提供的样式

• container:响应式布局版心类

（4）栅格系统

【1】 栅格化是指将整个网页的宽度分成若干等份

【2】 BootStrap3默认将网页分成12等份

【3】 使用BootStrap栅格系统布局响应式网页

• .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

• .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

• 分别使用.row类名和 .col类名定义栅格布局的行和列。

• 注意:

1. container类自带间距15px;

2. row类自带间距-15px.。

（5）BootStrap手册

【1】全局样式

【2】组件

【3】插件

【4】定制