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%
- PC屏幕大,网页
- 在谷歌浏览器中,如果选择手机面板调试
- 注意:我们编写代码参考的是逻辑分辨率
当我们在浏览器中切换到手机端显示时, 我们可以看到网页的宽度并不是显示 对应手机模型的宽
这是因为我们没有适配宽度, 我们在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布局非常适合结构化布局
- 基于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文件的内容
- CSS:书写
在我们没有配置的情况下, Less
文件保存生成的CSS
文件默认会在个Less
文件的同级目录下生成。在后面的开发中我们可能不希望这个两个文件在同一级别的目录下,所以我们需要自定义配置导入路径。
- 方法一:
配置EasyLess插件,实现所有的Less有相同的导出路径
配置插件:设置-搜索EasyLess-在setting.json中编辑-添加代码(注意必须是双引号)
注意: 后面必须在跟个/
不然表示文件名, 加/
之后表示文件夹
- 方法二:代码直接导出
导出到某哥具体的文件夹:
也可以导出指定文件名:
禁止导出:不是所有的less文件都需要导出CSS文件的,在less文件的第一行添加://out: false
可以看到保存08-禁止导出.less
后并没有生成新的css
文件
3.3. vm/vh适配
vw/vh
:相对单位,相对视口的尺寸
的计算结果vw
: viewport width1vw = 1/100视口宽度
vh
:viewport height1vh = 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 使用步骤
- 引入: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">(没有压缩过)
- 调用类:使用BootStrap提供的样式,
container:响应式布局版心类
4.2.3 栅格系统
-
BootStrap的核心: 栅格系统
,实现响应式网页的核心
-
栅格系统是指将整个网页的宽度分成若干等分
-
BootStarp3默认将网页分成12等分
-
.container
是BootStrap中专门提供的类名,所有应该该类的盒子,默认已经被指定宽度且居中 -
.container-fluid
:也是 BootStrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%
-
分别使用
.row
类名和.col
类名定义栅格系统的行和列
-
注意:
.container类子代间距15px
、row类自带间距-15px
.row
类的作用就是低效.container
类的15像素的padding, 因为.row
有-15px
的padding
关于更多的BootStrap
的使用方法,可以参考官方文档资料。
本文示例代码:示例代码
以上是关于web学习-前端进阶的主要内容,如果未能解决你的问题,请参考以下文章
web前端入门到实战:html/css弹性布局的几大常用属性详解