web学习-前端进阶

Posted GY-93

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web学习-前端进阶相关的知识,希望对你有一定的参考价值。

web学习-前端进阶

1. CSS3

1.1 字体图标

如果使用字体图标来实现网页中简洁的图标效果? 那么如何在项目中使用字体图标了?
首先我们需要打开iconfont的官方网站,然后登录账号,把需要的图标加入购物车

然后把购物车内的你需要的图标添加到一个项目中,如果没有项目则创建一个项目

添加到项目中然后再下载下来:

接下来的就是在项目中使用

1.2 平面转换

1.2.1 位移

  • transform:translate(水平移动距离, 垂直移动距离)
  • 取值(正负均可):1、像素单位数值; 2、百分比(参照物为盒子的自身尺寸),这里需要注意的是X轴正方向为右,Y轴正方向为下
  • 如果translate()如果只出一个值,表示X轴方向的移动距离, 如果你想单独设置某个方向的移动距离,可以使用translateX()&translateY()

案例:使用translate实现元素位移效果

1.2.2 旋转

  • transform:rotate(角度):角度的单位是deg, 该值去正负值都可以,取值为则顺时针旋转,取值为,则逆时针旋转
  • transform-origin:该属性改变盒子转换的原点
    • 默认原点是盒子的中心点transform-origin:原点水平位置,原点处置位置
    • 取值:
      • 方位名词:left、top、right、bottom、center
      • 像素单位数值
      • 百分比(参照盒子自身尺寸计算)
    • 注意: 测试旋转,必须要有过度才可以,如果没有添加过度,你是感觉不到旋转的动画效果的

  • 修改中心点的案例:
    • 修改中心点,不要在hover上加, 转换谁的中心点就在哪个盒子上加
    • 改变的是转换的中心点(位移、缩放,旋转都可以通过这个属性修改 中心点)

1.2.3 多重属性转换

目的:使用translate复合属性实现多形态转换,

  • transform: translate() rotate():有多重转换的时候,可以把transform当做一个复合属性来使用
    • 注意点:
      • 如果位移和旋转同时存在,位移需要放在复合属性前面, 因为旋转会改变想x、y轴的方向(改变坐标的轴向), 如果位移在后, 那么在旋转的过程中, x、y轴的方向在不断的变化,那么位移会发生一个无法控制的效果动画
      • 为什么需要写复合属性? 如果不写复合属性,transform会发生覆盖,后面的会覆盖的前面的效果

位移放在旋转效果之前: 可以看到平移的效果是按照直线平移

位移效果放在旋转之后:我们可以看到图片的位移没有按照我们的想法程直线平移

1.2.4 缩放

  • transform:scale(x轴缩放倍数, y轴缩放倍数),但是一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放
  • 思考: 改变元素的width和height属性能够实现?
  • 答案:是可以实现的,但是图片的放大缩小是以左上角的点开始缩放的, 大多数情况下不符合我们的要求,但是transform:scale()默认以盒子的中心点来缩放的,我们还可以通过transform-origin:()来调节缩放的中心点

上述通过transform: translate(-50%, -50%)使播放按钮居中,还可以通过margin-left、margin-top设置具体的负数值来完成

1.3 渐变

  • background-image: linear-gradient 颜色1,颜色2属性实现渐变色的背景效果
    • 渐变是多个颜色逐渐变化的视觉效果
    • 一般用于设置盒子的背景

案例:

注意:该透明蒙层的出现和小时,其实也可以使用display:none该属性完成

1.4 平移、缩放、渐变综合案例

1.5 空间转换

1.5.1 空间平移和透视(perspective)

空间:是从坐标轴的角度定义的。x、y和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。空间转换也叫3D转换属性:transform

  • 语法:
    • transform:translate3d(x,y,z)
    • transform:translateX(值)
    • transform:translateY(值)
    • transform:translateZ(值)
    • 取值(正负均可):像素单位数值或则百分比

  • perspective:属性实现透视效果,Z轴是视线方法,在该轴方向移动我们是看不出来,但是使用perspective属性看到在Z轴方向的移动,实现:近大远小,近实远虚的效果
    • 注意: 该属性是添加给父级perspective:值,取值是像素单位,数值一般在800-1200的值,透视距离也被称为视距,所谓的视距就是人的眼睛到屏幕的距离


1.5.2 空间旋转(ratate)

  • transform:rotateZ(值)transform:rotateX(值)transform:rotateY(值)
  • 左手法则:判断旋转方向:左右握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
  • 拓展:rotate3d(x,y,z,角度读书):用来设置自定义旋转轴的位置,级旋转的角度,x、y、z取值为0-1之间的数字


  • 立体呈现: perspective透视属性只能增加远近大小,近实远虚的视距效果,呈现立体图像需要使用属性:transform-style:perserve-3d
    • 添加transform-style:perserve-3d,需要注意的是该属性需要添加在直接父级上
    • 使子元素处于真正的3d空间
    • 默认值flat,表示子元素处于2D平面内呈现

案例:

  • 3D导航案例分析:
    • 调节a标签的位置(子绝父相)
    • 英文部分添加旋转位移样式
    • 中文部分添加位移样式

1.5.3 空间缩放

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

在x、y轴上的缩放和之前学习的平面上的缩放是一样的,这里就不在多说。
z轴的缩放, 一般看不出效果, 需要你设置perspective:数值(透视效果)才能看出效果。上面也有例子, 所以这里也不在多说。

1.6 动画

1.6.1 动画的基本使用

  • animation:实现动画效果,之前我们经常使用的过度效果,只可以实现两个状态间的变化,并且不能控制,但是动画效果是实现多个状态间的变化状态,动画过程可控(重复播放,最终动画、是否暂停)
  • 动画的本质是快速切换大量的图片在人脑中形成具有连续性的画面
  • 构成动画的最小单元:帧或动画帧
  • 动画实现的步骤:
  • 使用动画: animation: 动画名称 动画话费时长;

1.6.2 动画的复合属性用法

  • animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态
  • 注意:
    • 动画名称和动画时长必须赋值
    • 取值部分先后顺序
    • 如果有两个时间值,第一个时间值表示动画时长,第二个时间值表示延迟时间
  • 动画属性的一些初始值:

1.6.3 动画属性的拆分

  • animation复合属性也可以拆分成单独属性来使用

1.6.4 逐帧动画

  • 逐帧动画 : 使用setup实现逐帧动画,其属性:animation-timing-function:其作用是将动画过程等分成N分,帧动画,一般配合精灵图实现动画效果。
  • 精灵动画的制作步骤:
    • 准备显示区域:设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
    • 定义动画:改变背景图的位置(移动的距离就是精灵图的宽度
    • 使用动画:添加速度曲线(setups(N))N与精灵图上小图个数相同,添加无线重复效果

2. Flex

2.1 Flex布局之前需要了解知识

  • PC网页和移动网页的有什么不同?
    • PC屏幕大,网页固定版心
    • 手机屏幕小,网页宽度多为100%
  • 在谷歌浏览器中,如果选择手机面板调试
  • 注意:我们编写代码参考的是逻辑分辨率

当我们在浏览器中切换到手机端显示时, 我们可以看到网页的宽度并不是显示 对应手机模型的宽

这是因为我们没有适配宽度, 我们在VSCode中创建html文件时,其实工具已经帮我们适配好了<meta name="viewport" content="width=device-width, initial-scale=1.0">
这句代码,只要我们使用工具创建heml文件时,会自动生成, 不需要我们区写,但是这个原因我们需要知道。

  • 百分比布局:也叫流式布局,效果:宽度自适应,高度固定流式布局是比较以前的适配方式,现在我们使用流式布局来实现京东底部工具栏的实现

2.2 Flex 布局

目标:能够使用Flex布局模型灵活、快速的开发网页

  • 思考:
    • 多个盒子横向排列使用什么属性? 浮动
    • 设置盒子的间距使用什么属性?margin
    • 需要注意什么问题?浮动的盒子脱标
      但是Flex布局可以实现之前float(浮动)的效果,并且不会有脱标现象 ,下面我们来验证下Flex布局是否真的不会脱标。

子元素使用浮动, 父元素没有设置的宽度时, 由于子元素的脱标,父元素不会高度

flex布局可以完成之前学习float的效果,并且不会有脱标现象

2.3 Flex布局组成

2.3.1 Flex布局介绍

  • Flex布局/弹性布局:
    • 是一种浏览器提倡布局模型
    • 布局网页更简单、灵活
    • 避免浮动脱标的问题
  • Flex布局模型构成:
    • 基于Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流的现象发生
    • Flex布局非常适合结构化布局
  • 设置方式:父元素添加display:flex,子元素可以自动的挤压或拉升
  • 组成部分:
    • 弹性容器
    • 弹性盒子
    • 主轴
    • 侧轴/交叉轴

      注意:默认主轴是在水平方向, 交叉轴在垂直方向

2.3.2 主轴对齐方式

  • justify-content:调节元素在主轴的对齐方式

主轴方向居中对齐:

space-between:

2.3.3 侧轴对齐方式

  • align-items:调节所有子元素在侧轴的对齐方式
  • align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子

调节所有子元素的在侧轴的对齐方式:

调节单个子元素在侧轴方向的对齐方式:

2.3.4 弹性盒子的尺寸特点

  • 当弹性盒子的对齐是stretch并且子级盒子没有设置size的时候,那么子级盒子在主轴方向会包裹内容显示, 在侧轴方向会拉伸至铺满父盒子

  • 如果子级元素自身已经设置size,那么久会使用自身设置的size

2.3.5 弹性伸缩比

  • fix:值(占比份数): 设置的值是把父盒子剩下的宽度分成多份,然后占比设置值的份数, 通过此属性达到设置盒子的宽度

2.3.6 修改主轴方向

  • flex-direction:改变元素的排列方向,主轴默认是水平方向,侧轴默认是垂直方向

案例:

代码调整之后:

2.3.7 弹性盒子换行

  • flex-wrap:wrap:实现弹性盒子多行排列的效果
  • align-content::取值与justify-content一样 ,作用是调整行的对齐方式
  • flex弹性布局的特点:只要父级设置了size,那么自己的size都是可以自动伸缩的,子级设置的size在父级中排列不下的时候,就会缩小子级盒子的size以显示, 否则按照子级的size的显示

没有设置换行之前,弹性盒子缩小置能够在父盒子中显示,即使子盒子设置了自身的size

设置换行属性之后:

3. 移动适配

  • 移动适配目前具有两种方案:
    • rem : 目前多数企业在用的解决方案
    • vw/vh:未来的解决方案

3.1 rem

3.1.1 rem的介绍

  • 网页效果: 屏幕的宽度不同,网页元素尺寸不同(等比缩放)
  • px单位或者百分比布局 可以实现吗?
    • px是绝对单位
    • 百分比布局特点是宽度自适应,高度固定
  • rem
    • 相对单位
    • rem单位是相对于HTML标签的字号计算结果
    • 1rem=1HTML字号大小

由此可见,rem是更具html字号大小来计算高度

3.1.2 媒体查询

  • 手机屏幕的大小不同,分辨率不同,如何设置不同的HTML标签字号?
    • 媒体查询能够检查视口的宽度,然后编写差异化的CSS样式
    • 当某个条件成立,执行对应的CSS样式
    • 写法:

媒体查询适配案例:

  • 设备宽度不同,HTML标签字号设置多少合适?
    • 目前rem布局方案中,将网页分为10份,HTML标签的字号为视口宽度1/10 , 但是并不是说字号一定为视口宽度的1/10大小,也可以更具自己的喜好来设置

3.1.3 rem的适配原理

  • 目标:计算68px是多少个rem?(假定设计稿适配375px视口)
  • N * 37.5 = 68 -> N = 68 /37.5
  • rem的单位尺寸
    • 确定设计稿对应设备的HTML标签字号,查看设计稿宽度->确定参考设备宽度(视口宽度)->确定基准根字号(1/10视口宽度)
    • rem的单位尺寸 = px单位数值/基准根字号

3.1.4 flexible.js

目标:使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放的效果

  • flexible.js:是手淘开发出的一个用来适配移动端的js框架。
  • 核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size

上述代码,我们并没有自己写媒体查询来设置html的字号,导入flexible.js之后,我们依然可以正确适配各个不同窗口的大小

3.2 less

3.2.1 less语法的基础介绍和计算

我们知道CSS是不支持计算写法,我们可以通过less来实现

  • Less是一个CSS预处理器,Less文件后缀是less,想要使用less,那么VSCode需要先安装一个插件Easy Less

当我们安装插件之后, 当我们编写less文件之后, 保存之后会在动在同级目录下生成一个同名称的.css文件,文件中有我们书写的对应的CSS

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

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

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

  • 关于less文件中的注释:

  • less中的运算:

3.2.2 less嵌套写法生成后代选择器

嵌套: 作用是快速生成后代选择器
语法:

  • 注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素来使用

3.2.3 Less变量设置属性

例如: 我们可以把颜色提前储存到一个容器,设置属性值为这个容器名

  • 变量:存储数据,方便使用和修改
  • 语法:
    • 定义变量:@变量名:值
    • 使用变量:CSS属性:@变量名

3.2.4 less文件的导出导入

  • 开发网站时,网页如何导入公共的样式?
    • CSS:书写link标签
    • Less:导入,@import“文件路径”;

      可以看到,上述less除了导入其他的less文件之外,并没有写任何代码,但是保存之后生成的CSS文件确是包含了导入的less文件的内容

在我们没有配置的情况下, Less文件保存生成的CSS文件默认会在个Less文件的同级目录下生成。在后面的开发中我们可能不希望这个两个文件在同一级别的目录下,所以我们需要自定义配置导入路径。

  • 方法一:配置EasyLess插件,实现所有的Less有相同的导出路径
  • 配置插件:设置-搜索EasyLess-在setting.json中编辑-添加代码(注意必须是双引号)



注意: 后面必须在跟个/不然表示文件名, 加/之后表示文件夹

  • 方法二:代码直接导出

导出到某哥具体的文件夹:

也可以导出指定文件名:

禁止导出:不是所有的less文件都需要导出CSS文件的,在less文件的第一行添加://out: false

可以看到保存08-禁止导出.less后并没有生成新的css文件

3.3. vm/vh适配

  • vw/vh:相对单位,相对视口的尺寸的计算结果
    • vw: viewport width 1vw = 1/100视口宽度
    • vh:viewport height 1vh = 1/100视口高度
  • 使用vw/vh来适配,不需要添加任何文件, 可以直接使用, 使用方法和rem类似。
  • vw的单位尺寸
    • 确定设计稿对应的vm尺寸(1/100)视口宽度
    • vw单位的尺寸 = px单位像素/(1/100)视口宽度

4. 响应式

响应式网页: 一套代码兼容不同的屏幕适配

4.1 媒体查询

首先我们要知道响应式网页的核心就是媒体查询,检测不同的视口大小,根据不同的条件设置差异化的CSS样式

4.1.1 媒体查询的基础介绍

  • 媒体查询的常用写法:
    • max-width:最大宽度,表示小于或等于这个宽度,书写书写要按照从大到小
    • min-width:最小宽度,表示大于或等于这个宽度,书写书写要按照从小到大
    • 媒体查询查询本质上也是书写CSS属性,所有的CSS属性都遵循层叠性,这也就是说,如果不按照顺序写,CSS属性可能会发生层叠性,导致一些效果可能不会出现

基础案例:

媒体查询书序书写案例:

4.1.2 媒体查询的关键词

  • 媒体查询的完整写法:@media 关键词 媒体类型 and (媒体特性) CSS代码

  • 关键词有如下几个:and、only、not

  • 媒体是用来区分设备类型的,如屏幕设备,打印设备等,其中手机、电脑、平板都属于设备。

  • 媒体特性主要用来描述描述媒体类型的具体特征,如当前屏幕的宽度、分辨率、横竖屏或竖屏等

  • 外链式CSS引入:

媒体查询实现根据视口宽度隐藏控件

4.2 BootStrap

4.2.1 了接BootStrap

  • BootStrap:一个主要做响应式网页的框架。
  • BootStrap是由Twitter公司研发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定的HTML结构javascript,快速编写功能完善网页及常见的交互效果
  • 中文官网:https://www.bootcss.com

4.2.2 使用步骤

  1. 引入:BootStrap提供的CSS代码,<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">(压缩过的) <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">(没有压缩过)
  2. 调用类:使用BootStrap提供的样式,container:响应式布局版心类

4.2.3 栅格系统

  • BootStrap的核心: 栅格系统,实现响应式网页的核心

  • 栅格系统是指将整个网页的宽度分成若干等分

  • BootStarp3默认将网页分成12等分

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

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

  • 分别使用.row类名和.col类名定义栅格系统的行和列

  • 注意: .container类子代间距15pxrow类自带间距-15px

.row类的作用就是低效.container类的15像素的padding, 因为.row-15px的padding

关于更多的BootStrap的使用方法,可以参考官方文档资料。

本文示例代码:示例代码

以上是关于web学习-前端进阶的主要内容,如果未能解决你的问题,请参考以下文章

WEB前端进阶之路 HTML 全路线学习知识点梳理(上)

Web前端进阶之JavaScript模块化编程知识

自学前端开发,前端进阶阶段需要学习哪些知识?

web前端入门到实战:html/css弹性布局的几大常用属性详解

web前端入门到实战:html/css弹性布局的几大常用属性详解

前端进阶之路-三如何用gulp搭建一套web前端开发框架