移动Web基础知识整理

一、CSS3

1.字体图标

1.1 字体图标的基本使用

iconfont字体图标的使用步骤：

引入对应iconfont的css文件

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

页面中写入标签，加入iconfont的类名

2个单词，多类名形式存在，一个是iconfont的公共类，另一个是图标的类名
<i class="iconfont icon-favorites-fill"></i>

1.2 iconfont类

统一控制字体图标的字体类型 font-family:iconfont
统一控制字体图标的字号 font-size：16px
通过修改 .iconfont 实现统一修改字体图标或者通过修改 .icon-favorites-fill 实现单独修改字体图标
因为权重不够，i标签的权重为 0 0 0 1 ，类名的权重为 0 0 1 0。类名的权重比标签要大

1.3 字体图标-svg-上传-意义

场景：当自己项目中，没有阿里巴巴矢量图网站上的字体图标，需要自己上传独有的图标时

步骤：

与设计师沟通，得到SVG矢量图
去iconfont网站上传得到的SVG矢量图生成字体图标
登录帐号
点击上传按钮，并把svg文件拖到上传窗口中
批量加入购物车
添加到项目–对应项目
下载至本地

2.平面转换

2.1 transform介绍

场景：让网页变的更加有意思，交互效果更加丰富，可以让元素位移、旋转、缩放等操作，平面指的2D平面，X/Y轴的正方形分别指:

Y轴是纵线，正方向朝下

X轴是横线，正方向朝右

2.2 平面转换-位移

语法：transform:translate(X轴位移, Y轴位移)
取值：像素单位、百分比单位（根据自身盒子大小）

例：盒子宽高200*100px，位移（-100%,50%），位移效果：

位移如果是百分比单位，位移是根据盒子自身大小来控制的，位移（-100%, 50%）换算成px单位为（-200px, 50px）

<div class="father"><div class="son"></div>
</div>

.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;
}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;
}/* 鼠标移入到父盒子，son改变位置 */
.father:hover .son {transform: translate(100px);
}

2.3 位移技巧

2.3.1 单独移动

translate(x,y) 可以分别写入X/Y的位移值，但是如果只写一个值就代表只移动X轴方向
translateX是单独控制移动X轴方向的位移属性
translateY(200px); translateY是单独控制移动Y轴方向的位移属性

2.3.2 定位盒子居中

一般的两种方法分别为：

绝对定位 + margin回来自身盒子的一半
绝对定位 + translate(-50%, -50%)回来自身的一半

优点：

translate的方法更有优势
margin 方法需要自己手动计算，而translate(-50%, -50%) 的方法自动计算

2.3.3 案例-双开门

步骤：

准备一个大盒子box，拥有背景图
在大盒子box中加入before和after的伪元素，分别用精灵图的方式分别显示左右两个盒子

浮动后才能让两个伪元素一排显示，并且没有任何间隙
伪元素必备属性是 content:’ '；

双开门-开门

左边 before 伪元素：让他向左移动一个自身距离，所以加上 translate(-100%)或translateX(-100%)

右边 after 伪元素：让他向右移动一个自身距离，所以加上 translate(100%)或translateX(100%)

谁动就给谁加过渡属性 transition 做动画。

.box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');overflow: hidden;
}.box::before,
.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all .5s;
}.box::after {background-position: right 0;
}/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {transform: translate(-100%);
}.box:hover::after {transform: translateX(100%);
}
.box:hover::before,
.box:hover::after {transition: all .5s
}

<div class="box"></div>

2.4 平面转换-旋转

取值：旋转和位移公用一个transform属性，他们都属于平面转换属性

语法：**transform:rotate(角度deg)
正数顺时针
负数逆时针

实现步骤：

引入img图片
鼠标hover时设置旋转属性 transform:rotate(360deg)
给img图片加上过渡属性transition:all 2s

2.5 平面转换-旋转原点

语法：transform-origin属性可以改变元素旋转、缩放的属性转换中心位置比如：元素旋转，默认以正中心旋转（类似于风车）。通过transform-origin属性可以切换位置，按照右下角旋转

transform-origin属性的取值方式：

方位名称（left、top、right、bottom、center）
像素单位
百分比（参照自身大小）

2.6 平面转换-多重旋转

使用场景：出现稍微复杂的动画效果，需要同时旋转和位移的时候，除了轮胎滚动案例外，还有类似的足球、小熊奔跑都可以使用到该属性

平面转换的复合写法位移和旋转之间用空格隔开

transform:translate(x, y) rotate(deg)

同时需要位移和旋转的时候，我们优先写位移

一般情况下需要优先写位移，再写旋转因为旋转会影响XY轴的方向，导致在偏移的过程中不断朝新的方向移动，给我们带来理解上的障碍。所以大家切记优先位移后旋转

2.7 平面转换-缩放

语法：transform:scale(x缩放倍数, y缩放倍数)
取值：无（倍数）
2 代表放大两倍
1 代表不缩放
0.8 代表缩小为0.8倍

2.8 平面转换-倾斜

倾斜属性类似于translate，可以分开写，也可以组合在一起

/* 1. 单独控制X轴倾斜  */
transform:skewX(deg)
/* 2. 单独控制Y轴倾斜  */
transform:skewY(deg)
/* 3. X/Y轴同时倾斜  */
transform:skew(xdeg,ydeg)
/*单位：deg 度数*/

3. 渐变

3.1 渐变

渐变的使用场景

线性渐变：linear-gradient

径向渐变：radial-gradient

多个背景颜色逐渐变化的视觉效果，为了美观、凸显视觉效果的时候可以使用
渐变是背景属性

background-image:linear-gradient(颜色1, 颜色2);
background-image:linear-gradient(pink, black);

background-image:radial-gradient(颜色1, 颜色2);
background-image:radial-gradient(red, green);

background-image:radial-gradient(颜色1, 颜色2);
background-image:radial-gradient(red 30%, yellow 60%,green 90%);

渐变色可以由两个或者多个颜色组合而成,支持渐变的起始位置

华为案例的渐变色是由透明色到黑色半透明状态

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

例：

    <div class="box"></div>

.box {width: 250px;height: 250px;margin: 100px auto;background-color: cadetblue;background-image: linear-gradient(red,orange,yellow,green,blue,purple);}

4.空间转换

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

空间转换的属性：
1. 位移
2. 旋转
3. 缩放

4.1 空间转换-位移

位移语法：

transform:translate3d(x,y,z) 同时控制XYZ轴3个方向的移动
transform:translateX(x) 单独控制X轴方向的移动
transform:translateY(y) 单独控制Y轴方向的移动
transform:translateZ(z) 单独控制Z轴方向的移动
transform:translate2d(x,y) 同时控制XY轴2个方向的移动（基本相同但是多一个Z轴）

translateZ(200px) ：元素向屏幕外移动200px

单独控制Z轴是看不出任何效果的，还需要学习后面的透视配合一起使用才行

4.2 空间转换-透视

perspective == 透视 == 近大远小
perspective属性一般写在父级（或祖先元素身上）
正常情况perspective属性的值一般控制在800-1200px之间

在透视的加持下 transform:translateZ(200px) 后可以看到

元素变大，其实就是近大远小的效果

如果想要元素变小，那么可以改变transform:translateZ(200px)的值，为负数，比如：transform:translateZ(-200px) 那么元素向屏幕内移动200px，距离我们更远一点，所以更小一些

页面中存在近大远小效果的时候，使用透视属性

实现步骤：

设置被观察元素
给元素设置z轴位移属性
给被观察元素父级写上透视属性
观察元素变化（可以在浏览器中改变z轴数值达到观察效果）

4.3 空间转换-透视原理

perspective 控制眼睛和屏幕之间的距离

translateZ 控制元素和屏幕之间的距离

如何做到让元素看起来变小？

核心：元素和屏幕的距离差变大

元素不动的情况下，控制眼睛向屏幕外移动，眼睛离屏幕距离变大（控制perspective变大）
眼睛不动的情况下，控制元素向屏幕内移动，元素离屏幕距离越大（控制translateZ变小）
同时改变元素和眼睛的位置，元素向屏幕内移动，眼睛向屏幕外移动（控制perspective变大、控制translateZ变小，导致元素和屏幕的距离差变大）

4.4 空间转换-rotateZ

rotateZ属性和rotate属性效果一模一样，可以互用

4.5 空间转换-rotateX

有什么是根据X轴旋转的？

笔记本电脑开关盖子
翻台历
翻盖手机
翻蓝牙耳机盖

X轴旋转的时候，需要配合透视属性从屏幕侧面思考，因为X轴旋转的时候，元素跟屏幕距离会发生变化，旋转过程中，有一条边会离屏幕近，所以开启透视，让屏幕拥有近大远小的效果。

4.6 空间转换-rotateY

有什么是根据Y轴旋转的？

开门
翻书

4.7 空间转换-rotate3d

rotate3d(x,y,z,deg)：X/Y/Z轴之外，自定义一个旋转轴（用的极少）

4.8 空间转换-立体呈现

transform-style:preserve-3d ：让子元素保持3D效果的必备属性

立体呈现实现步骤：

页面布局一个父盒子嵌套两个子盒子(正面和反面)
开启透视和保持子元素3d效果
定位子元素
移动元素，建立空间感
旋转父盒子达到观察立体盒子的效果

4.9 3d导航-结构分析

一个中英文的立体导航，默认显示中文标题，鼠标移入能够将立体导航沿X轴负方向翻转90度，露出英文标题

难点在于，如何先构建出一个立方体

构建出立方体盒子导航需要2个面，一个绿色中文的正面和一个橙色英文的顶面

4.10 3d导航-搭建立方体

顶面：先沿着X轴方向旋转90度，然后再对着Z轴位移20px（高度的一半）

正面：直接对着Z轴位移20px（高度的一半）

正面、顶面沿同样的轴位移同样的大小，但是方向却不一样，这是因为在顶面的书写顺序是先旋转了90度，再做位移，那么如果先旋转了整个坐标轴的方向也会发现改变

理解：向右转和向前走两个动作，如果执行顺序不一样，那么结果也会不一样，以上是同理！

4.11 3d导航-hover

新增css代码：

/* li:hover 立方体旋转 */
.navs li:hover {transform: rotateX(-90deg);
}

空间转换-缩放」答案

空间转换使用的场景不多，现在偏向简介风格，所以使用频率非常少

缩放的语法：

同时控制x/y/z轴缩放 transform:scale3d(x,y,z)
单独控制x轴缩放 transform:scaleX(x)
单独控制y轴缩放 transform:scaleY(y)
单独控制z轴缩放 transform:scaleZ(z)

5.动画

过渡和动画的区别：

过渡：实现2个状态之间的变化过程
动画：实现多个状态之间的变化过程，动画过程可控（重复、最终画面、是否暂停）

5.1 动画-from to

基本步骤：

页面结构布局
定义动画

@keyframes 动画名称{from{}to{}
}

使用动画

animation:动画名字 动画执行时间

from to模式和百分比模式的区别：

from to模式只支持2两个状态的变化
百分比模式支持多个状态的变化

5.2 动画-百分比

@keyframes 动画名称{0%{}20%{}50%{}100%{}
}

动画百分比模式的优势:

可以控制多个状态之间的变化
可以通过百分比来控制某一段动画执行的时间长短

5.3 nimation复合属性

animation

动画属性

动画名称
动画时长
速度曲线
延迟时间
重复次数

动画必填属性

动画名称
动画时长

动画属性没有顺序要求，可以任意写

其中比较特殊的有：速度曲线中有一种速度是可以让动画一共按照n步来执行完毕：steps(n) 重复次数中如果是有固定执行次数的直接写数字，如果需要无限循环：infinite

其他动画属性：

动画方向： alternate-执行结束反向执行

执行完毕时状态：

backwards：动画执行完毕之后停留在最初状态
forwards：动画执行完毕之后停留在结束状态

5.4 animation的拆分写法：

animation-name:动画名称
animation-duration:动画时长
animation-timing-function:速度曲线
animation-delay:延迟时间
animation-itearaion-count:重复次数（默认是1、infinite是无限次数）
animation-direaction:动画方向（normal、alternate逆向）
animation-fill-mode:动画执行完毕时状态（backwoards（默认）回到初始位置、forwards停在终点位置）
animation-paly-state:动画播放状态(running运行、paused停止)

5.5 逐帧动画

补时动画：动画之间运动非常细腻连贯
逐帧动画：动画之间有明显的间隔，steps(n)应该用在逐帧动画上，可以实现精灵图的切换

逐帧动画的实现：

写一个小盒子窗口，里面刚好可以放一个小人的大小（精灵图做法）
定义动画
利用动画曲线中的逐帧动画 steps(14) 不断改变背景定位从第一张图切到最后一张图，并且重复次数为无线循环
调用动画

5.6 动画-多组动画

平面转换的复合写法位移和旋转之间用逗号隔开

animation:动画1,动画2

动画拆分写法(了解)

名称	属性	说明	属性值
动画名称	animation-name	动画名称
动画时长	animation-duration	动画执行时间
速度曲线	animation-timing-function	动画执行速度	linear 匀速 ease先慢后快再慢 ease-in先慢后快 ease-out先开后慢
延迟时间	animation-delay	动画延迟时间
重复次数	animation-itearaion-count	动画执行次数	n 次数 infinite是无限次数
动画方向	animation-direaction	动画执行完毕后继续执行的方向	normal正向 alternate逆向
动画执行完毕时状态	animation-fill-mode	动画执行完毕后保持位置	backwoards回到初始位置 forwards停在终点位置
动画播放状态	animation-paly-state	动画是否停止	running运行 paused停止

案例

走马图

显示图片为三张，全部图片为7张时，应设置10张图片动画，以实现无缝衔接动画

背景大图片

子元素高度应和父元素一致，注意HTML的高度是否为0，body应与HTML的高度一致

图片和网页尺寸不合时，可以设置等比例缩放，background-size：contain/cover；

contain:当图片的宽度或高度和页面一致时，将不再缩放

cover:让图片的宽度或高度（最短的边）和页面一致，将图片相对完整的展示

二、移动端和流式布局

1、移动端特点

1. 移动端和PC端网页的不同点

pc
1. 屏幕大
2. 有版心
移动端
1. 屏幕小
2. 没版心

pc和移动端不是一个网站

2. 谷歌模拟器

右击-检查-手机模拟器

在谷歌手机模拟器中可以选择机型、手机屏幕尺寸、显示显示比例等信息

3. 分辨率

分辨率存在哪两种？

物理分辨率（出厂固定）
逻辑分辨率（软件控制）
pc端参考逻辑分辨率
移动端参考逻辑分辨率

4. 视口

在移动端中网页宽度和逻辑分辨率宽度不一样，在移动端中网页默认是980px

在写移动端网页的时候，需要设置视口标签(meta不需要记，vscode快捷打开的时候就已经存在了。)，他的作用就是让网页宽度等于移动端设备（手机、平板）宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport：视口 l width=device-width：视口宽度 = 设备宽度 l initial-scale=1.0：缩放1倍（不缩放）

代码解释：

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

5. 二倍图

设计稿为750px，但是实际在375px的设备上进行开发，750对应375，就会存在一个比例，如果为2倍，则说明在开发过程中使用图片都需要是用2倍图
随着手机设备的更新，设备的物理像素越来越高，但逻辑像素跟手机大小挂钩，所以不会有太大的变化。就会存在一个物理像素比,2:1,3:1之类的，也是我们所谓的2倍图、3倍图。举例：比如iphone678，物理像素比为2:1，需要使用2倍图。如果准备一张100X100的大小的图片，代码宽度也设为100X100，因为逻辑像素为375对应物理像素的750，所以在iphone678手机上显示为200X200的图片，那么导致原本100X100的图显示为200X200的图，图本身被变大，图片会变模糊，为了不让图片变模糊，我们应该准备2倍图如果准备一张原本200X200的图片，代码宽度设为100X100，因为逻辑像素为375对应物理像素的750，所以在iphone678手机上显示为200X200的图片，那么原本200X200的图显示为200X200的图，图本没有变化，图片会为正常显示，所以我们应该准备2倍图

6. 百分比布局

百分比布局也叫流式布局，基本效果为宽度自适应，高度固定
当屏幕大小发生变化时，按照百分比布局的元素会按照比例拉伸，大屏变的超大，但里面的文字大小和元素高度不会发生变化

三、flex布局

1、flex简介

flex布局类似于浮动布局
但flex布局比浮动布局更简单更方便
flex布局又叫弹性布局，是浏览器提倡的布局模型，他的优势优势：

简单、灵活
避免浮动脱标问题

flex很灵活，可以做很多东西比如:

复杂的页面布局：1-6的骰子，甚至1-9坨的麻将
常见的布局-两端固定，中间灵活
常见的布局-左中右1:2:3比例显示

检查技术点兼容性网站caniuse中红色和绿色分别代表：

红色代表不支持
绿色代表支持
黄色代表支持，但是存在一些问题或者需要遵循什么条件才支持，比如
1. 使用私有前缀
2. 需要使用老语法
3. 不支持其中的某些子属性
4. 支持，但是依然存在某些问题
5. 不支持某些写法
6. 等等情况

2、flax组成

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

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

设置方式

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

组成部分:

父元素：弹性容器
子元素：弹性盒子
主轴：默认水平方向
侧轴/交叉轴：默认垂直方向

如何开启弹性布局？

找到需要被管理元素他们的亲爸爸，写入display:flex属性就相当于开启了弹性布局，那么可以开始控制里面的弹性盒子（子元素）

开启弹性布局后，元素会如何显示？

只开启弹性布局后，元素默认会水平方向向左对齐，因为，弹性盒子永远跟随主轴排列，而主轴默认为水平方向

图解：了解弹性盒子的各个组成部分[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clKOEncE-1637751292269)(flex%E7%BB%84%E6%88%90.png)]

3、主轴对齐方式

主轴对齐方式是一个弹性容器（父级元素）属性，写在弹性容器（父级元素）身上
修改主轴对齐方式属性justify-content:
1. flex-start 左侧对齐
2. flex-end 右侧对齐
3. center 居中对齐
4. space-around 子级之间的距离是父级两头距离的2倍
5. space-between 间距在弹性盒子之间
6. space-evenly 所有地方的间距都相等

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子和容器之间间距相等

实现步骤：

页面基本布局
弹性容器（父级元素）开启弹性布局
控制各种主轴属性，达到弹性盒子（子级元素）实现不同的布局方式

4、侧轴对齐方式

侧轴对齐方式是一个弹性容器（父级元素）属性，写在弹性容器（父级元素）身上

修改侧轴对齐方式属性:

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

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

flex-strat 左侧对齐
flex-end 右侧对齐
center 居中对齐
stretch 拉伸（在子元素、弹性盒子不设置高度的时候才生效）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

5、flex-单独控制某个盒子侧轴对齐方式

单独控制某个盒子侧轴对齐方式是一个弹性盒子（子级元素）属性，写在弹性盒子（子级元素）身上

问题 2：单独控制某个盒子侧轴对齐方式的属性值有哪些，分别代表什么意思？
- align-self:center 某弹性盒子（子级元素）单独居中对齐
align-self的单独控制某个盒子侧轴对齐方式属性不仅仅只有center居中对齐。主要具体属性和侧轴属性基本保持一致
1. flex-strat 左侧对齐
2. flex-end 右侧对齐
3. center 居中对齐
4. stretch 拉伸（在子元素、弹性盒子不设置高度的时候才生效）

6、伸缩比

使用flex属性修改弹性盒子伸缩比

属性：

flex : 值;

取值分类：数值(整数)

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

7、flex-修改主轴方向

在弹性容器（父级元素）身上写flex-direction：属性值如下

row 水平方向（默认）
column 垂直方向图解：其他对齐方式：

属性值	作用
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右向左
column-reverse	行，从下向上

改变主轴侧轴的flex-direction属性写在弹性容器（父级元素）身上

元素默认跟随主轴方向排列开启弹性布局后，弹性盒子主轴默认是水平方向（左至右），所以弹性盒子（子级元素）会跟随主轴排列，所以默认水平方向对齐但如果元素需要垂直方向对齐，那么只需要改变主轴的方向，让主轴方向变成垂直即可，因为元素依旧跟随主轴对齐（此时主轴为垂直方向）

切换主轴为column之后，主轴已经变为垂直方向，弹性盒子已经按照垂直方向对齐，那么此时控制水平方向的为侧轴、控制垂直方向的为主轴
侧轴通过align-items: center;实现居中
主轴通过justify-content: center;实现居中

基本实现步骤：

页面基本布局
大盒子里套图片和文字标签
大盒子开启弹性布局
改变弹性布局的主轴方向
调整弹性容器的主轴、侧轴对齐方式

8、flex-弹性盒子换行

开启弹性布局后，弹性盒子（子级元素）默认是强制一行显示的，如果一行放不下，弹性盒子（子级元素）会变成被压缩，直至一行全部显示完毕为止

弹性布局是否换行的属性叫flex-wrap

norwrap 不换行(默认)

wrap 换行

9、flex-调整行对齐方式

行对齐方式写在弹性容器（父级元素）身上
跟justify-content属性的属性值基本相似，align-content:
1. flex-strat 左侧对齐
2. flex-end 右侧对齐
3. center 居中对齐
4. space-around 子级之间的距离是父级两头距离的2倍
5. space-between 间距在弹性盒子之间
6. space-evenly 所有地方的间距都相等

注意： align-content跟align-items感觉基本相似，都是控制侧轴对齐方式，但是使用完全不一样，首先要区分到底是否换行如果没换行，只有一行的情况，只能使用 align-items 如果换了行，存在多排的情况，只能使用 align-content 尽然有些时候align-items和align-content混用也有效果，但是是我们应该按照标准来！ align-content比align-items多了splace-的3个属性（因为存在多行，所以可以分配剩余间隙）

10、flex-grow项目的放大比例

默认为0，可以设置任意非负数字

当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size=flex container的剩余size * flex-grow / sum
如果所有flex items的flex-grow总和sum小于1，每个flex items扩展的size=flex container的剩余size * flex-grow
flex items扩展后的最终size不能超过max-width\max-height
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

11、flex-shrink收缩

flex-shrink决定了flex-items如何收缩。

默认值为1，可以设置任意非负数字，负值对该属性无效

当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效
如果所有flex items的flex-shrink总和sum超过1，每个flex items收缩的size= flex items超出flex container的size * 收缩比例 /所有flex item的收缩比例之和

.box {display: flex;width: 500px;height: 500px;background-color: sandybrown;margin: 0 auto;
}

.item {width: 250px;height: 100px;text-align: center;line-height: 100px;color: white;
}.item1 {background-color: sienna;/* width = 250 -250/6*2 = 250 - 83.33 = 167.67 */flex-shrink: 2;
}.item2 {background-color: navy;flex-shrink: 3;
}.item3 {background-color: aquamarine;flex-shrink: 1;
}

如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size= flex item的size - flex items超出flex container的size * flex-shrink

.item1 {background-color: sienna;/* width = 250 -250/6*2 = 250 - 83.33 = 167.67 *//* flex-shrink: 2; *//* width = 250 - 250*0.2 = 200 */flex-shrink: .2;}.item2 {background-color: navy;/* width = 250 - 250*0.3 = 175 */flex-shrink: .3;}.item3 {background-color: aquamarine;/* width = 250 - 250*0.2 = 225 */flex-shrink: .1;}

flex items收缩后的最终size不能小于min-width/min-height

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

12、flex-basis

flex-basis用来设置flex items在main asis方向上的空间大小

auto: 默认值，即项目本身大小
具体宽度数值: 100px , 200px
决定flex items最终base size的因素，优先级从高到低为：

max-width\max-height\min-width\min-height
flex-basis
width/height
内容本身的size

13、flex

flex是flex-grow | flex-shrink | flex-basis三个属性的简写，flex属性可以指定1个，2个或三个值。

13.1 单值语法

值必须是其中之一：

一个无单位数(number)：它会被当做flex-grow的值
一个有效的宽度(width)值：它会被当做flex-basis的值
关键字none auto 或initial

13.2 双值语法：

第一个值必须为一个无单位数，他会被当做flex-grow的值
第二个值必须为以下之一：

一个无单位数：它会被当做flex-shrink的值
一个有效的宽度值：它会被当做flex-basis的值

13.3 三值语法：

第一个值必须为无单位数，作为flex-grow的值
第二个值必须为无单位数，作为flex-shink的值
第三个值必须为有效的宽度值，作为flex-basis的值

14、flex小结

弹性布局概念
- 名称：弹性布局、flex布局
- 作用：灵活、方便的控制元素的排列方式
- 作用元素：被控制元素的父级元素（亲爸爸）
- 属性名：display:flex
- 介绍：父级：弹性容器子级：弹性盒子主轴：默认水平侧轴：默认垂直
弹性布局主轴属性
- 作用：控制元素主轴排列方式
- 作用元素：父级：弹性容器
- 属性名：justify-content
- 属性值： flex-strat 左侧对齐 flex-end 右侧对齐 center 居中对齐 space-around 每一个元素都拥有属于自己的间隙 space-between 两端对齐平分剩下间隙 space-evenly 所有地方的间距都相等
弹性布局侧轴属性
- 作用：控制元素侧轴排列方式
- 作用元素：父级：弹性容器
- 属性名：align-items
- 属性值： flex-strat 左侧对齐 flex-end 右侧对齐 center 居中对齐 stretch 拉伸（子元素不设置高度）
弹性布局单独控制某一个侧轴属性
- 作用：单独控制某一个侧轴元素的排列方式
- 作用元素：子级：弹性盒子
- 属性名：align-self
- 属性值： flex-strat 左侧对齐 flex-end 右侧对齐 center 居中对齐 stretch 拉伸（子元素不设置高度）
弹性布局flex属性
- 作用：控制子级：弹性盒子的大小和比例
- 作用元素：子级：弹性盒子
- 属性名：flex
- 属性值：
  1. 获取剩下的所有空间
  2. 获取剩下的所有空间并按比例划分
弹性布局切换主轴侧轴属性
- 作用：切换主轴、侧轴的方向（元素跟随主轴排列，切换轴相当于切换元素对齐方向）
- 作用元素：父级：弹性容器
- 属性名：flex-direction
- 属性值： row 水平（默认） column 垂直 row-reverse 水平（右至左） column-reverse 垂直（下至上）
弹性布局换行属性
- 作用：开启弹性布局后，子级：弹性盒子会被强制一行显示的，如果一行放不下，让子级：弹性盒子变成压缩，直至一行全部显示完毕为止
- 作用元素：父级：弹性容器
- 属性名：flex-wrap
- 属性值： nowrap 不换行（默认） wrap 换行
弹性布局换行后在侧轴上排列属性
- 作用：换行后，主轴上的内容被换成2行或者多行，那么在控制侧轴的时候，不再是一行了，在多行的情况下也需要布局排列
- 作用元素：父级：弹性容器
- 属性名：align-content
- 属性值： flex-strat 左侧对齐 flex-end 右侧对齐 center 居中对齐 space-around 每一个元素都拥有属于自己的间隙 space-between 两端对齐平分剩下间隙 space-evenly 所有地方的间距都相等
- 不给弹性盒子设置宽高属性，默认由内容撑开

作用	所属元素	属性	属性值
开启弹性布局	父级	display	flex
切换主轴侧轴位置	父级	flex-wrap	row 水平（左至右）（默认） column 垂直（上至下） row-reverse 水平（右至左） column-reverse 垂直（下至上）
主轴属性（元素永远跟随主轴排列）	父级	justify-content	flex-strat 左侧对齐（默认） flex-end 右侧对齐 center 居中对齐 space-around 每一个元素都拥有属于自己的间隙 space-between 两端对齐平分剩下间隙 space-evenly 所有地方的间距都相等
侧轴单行属性（未换行）	父级	align-items	flex-strat 左侧对齐（默认） flex-end 右侧对齐 center 居中对齐 stretch 拉伸（子元素不设置高度）
侧轴多行属性（换行后）	父级	align-content	flex-strat 左侧对齐（默认） flex-end 右侧对齐 center 居中对齐 space-around 每一个元素都拥有属于自己的间隙 space-between 两端对齐平分剩下间隙 space-evenly 所有地方的间距都相等
换行	父级	flex-wrap	nowrap 不换行（默认） wrap 换行
单独控制某一个子元素的侧轴	子级	align-self	flex-strat 左侧对齐 flex-end 右侧对齐 center 居中对齐 stretch 拉伸（子元素不设置高度）
获取剩余宽度	子级	flex	1 获取当前剩余所有宽度
按比例划分	子级	flex	数字多个子级元素存在flex：数字属性，会根据数字来确定划分比例

四、移动端的适配

移动端等比例缩放的两种适配方案分别是：

rem：目前绝大多数企业再用的解决的方案

vw/vh：未来的解决方案（B站、天猫等已转型为vw/vh）

4.1 rem布局

rem仅仅只是一个单位，同px、cm一样都是一个单位
同样一个5rem数值，在不同屏幕下，显示不一样的大小，达到跟随屏幕大小变化实现等比例缩放效果，这也是我们移动端适配的最终效果

4.1.1 rem-基本使用

rem是一个相对单位，是相对于html根标签的字体大小
根据1rem = 1HTML字体大小，可以的到 1rem = 12px，有此可以分析的到2rem、4rem分别为
1. 2rem = 24px
2. 4rem = 48px

em和rem的区别： em和rem都是相对单位，只是相对的目标不一样，rem是相对于HTML根目录的字体大小，em是相对于父级元素的字体大小那么为什么em没有流行起来呢，因为在开发过程中，如果存在爷爷、儿子、孙子三级嵌套盒子。因为修改代码，导致其中的爷爷或儿子元素的字体大小发现改变，都会影响到孙子元素的大小举例：外层盒子 font-size:10px; 爷爷 font-size：2em; 等价于 20px 儿子 font-size：2em; 等价于 40px 孙子 font-size：2em; 等价于 80px 改动爷爷盒子为3em 爷爷 font-size：3em; 等价于 30px 儿子 font-size：2em; 等价于 60px 孙子 font-size：2em; 等价于 120px 所以em虽然有也是相对单位，也能实现rem的效果，但是维护成本太大，所以都会使用rem做为移动端适配的单位！

4.1.2 rem-媒体查询

检测视口的宽度，编写差异化的css样式
语法

@media (媒体特性){选择器 { css 属性 }
}
@media (width:320px){html { font-size:32px }
}
@media (width:375px){html { font-size:37.5px }
}

有了这个媒体查询，就能在不同屏幕尺寸下，让html的根目录字体大小也跟随变化了

媒体查询的作用是在不同的屏幕尺寸下差异化显示css样式，但不仅仅可以精确控制，还可以控制区间

/*width:500px 代表宽度等于500px
min-width:500px 代表最小宽度等于500px，意思是大于500px的区间可以适配
max-width:800px 代表最大宽度等于800px，意思是小于800px的区间可以适配*/
@media (min-width:500px){ 大于500px的区间可以适配 }
@media (max-width:800px){ 小于800px的区间可以适配 }
@media (min-width:500px) and (max-width:800px){ 处于500-800px之间可以适配 }

4.1.3 rem-移动适配

目前的rem布局方案中，将网页等分成10份，HTML标签的视口宽度的1/10

4.1.4 rem-布局流程

将设计稿中的px单位换算为移动端代码中的rem值，换算的公式是：

rem单位的尺寸 = px单位数值/基准根字号
如果设计稿是主流的iphone12promax，我们针对该机型完成了适配，那么我们的代码在其他机型适配吗？基本都适配因为rem是相对单位，切换屏幕也会切换根目录的字体大小举例:比如2rem。在iphone12promax上的，html根目录42.8px，1rem显示为85.6px。在切换机型（屏幕）至iphone5后，html根目录变成32px，2rem显示为64px。实现了同样的1rem在不同屏幕下显示不一样的大小（等比例缩放），完成移动端最终适配方案。

实现步骤：

页面基本布局
根据不同屏幕尺寸写入媒体查询
在不同媒体查询中写入具体html的font-size
页面中写入box元素
换算在iPhoneX手机时宽200px、高180px，字体44px的rem值

<div class='box'>设计稿元素</div>

@media (width:320px){html { font-size:32px }
}
@media (width:360px){html { font-size:36px }
}
@media (width:375px){html { font-size:37.5px }
}
@media (width:390px){html { font-size:39px }
}
@media (width:414px){html { font-size:41.4px }
}
@media (width:428px){html { font-size:42.8px }
}
.box{width:6.25rem;height:5.625rem;font-size:1.375rem;
}

4.1.5 rem-flexible移动适配

导入flexible.js文件

<body><script src="./js/flexible.js"></script>
</body>

4.2 less

less是css预处理语言，后缀名为.less的文件
less扩充了css语言，less具备css功能之外额外添加了逻辑、计算能力
浏览器不识别less，需要通过less文件生成css文件，html依旧使用css文件
需要通过编译生成css文件（借助easy less插件），html不能直接使用less文件

4.2.1 less-注释

1. 单行注释语法：// 注释内容 快捷键： ctrl+/ 效果：注释内容不显示到css文件中
2. 块注释语法：/* 注释内容 */ 快捷键 ctrl+alt+a 效果：注释内容显示到css文件中
块注释可以显示到css文件中

4.2.2 less-计算

less具备加减乘除的功能，除法稍微特殊，需要 (10 / 2) 或者 10 ./ 2
单位的控制
1. 运算符号两侧都有单位，取前面单位
2. 运算符号任意一侧有单位，取有该单位

加减乘除之间算，除rem单位要换算，其他之间相加减乘除

有单位则相加单位为px。若都无单位，计算结果也没有单位

less更新到4.0版本以后修改了除法的写法为

width:(10px / 2)
width:10px ./ 2

4.2.3 less-嵌套

好处

快速生成后代选择器
代码更简洁、高效
页面结构更加简洁，节约代码
更加好维护（所有同模块的内容全部在一起）

.boxA {.boxB {&::before{content:'',background:'red'}}
}

4.2.4 less-变量

变量：数据的一种存储方式

存储变量，页面统一使用，方便更改，更容易维护

@变量名:'变量数据';

4.2.5 less-导入

less之间可以互相导入

语法：@import less文件路径
less的导入功能，可以让多个less文件合并到一起，编译形成一个css文件，在html中引入时，只需要引入一个css文件即可，达到减少引入css次数的功能（其实还有复用的功能，某些公共less，可以反复使用）
如果引入的是less文件，可以省略less后缀名举例：

@import './base.less';
@import './base';
/*
引入less文件后缀可以省略，
两种导入方式效果完全一致
*/

4.2.6 less-导出

//out: ./less.css

插件配置

less生成css的路径是可以随意更改的，当前、上一级、下一级路径都可以更改

配置步骤

打开vscode
左下角齿轮
设置
输入easy
点击在 settings.json 中配置
找到less.compile，在下面的out中输入路径，比如

// 在less所在文件处生成css
"less.compile": {"out": "./"
}
// 在less所在父级的css文件夹中生成css
"less.compile": {"out": "../css/"
}

禁止导出

在less文件第一行添加:

// out: false

4.2.7 less-编译

lessc.js编译
1. 在html文件中引入less文件，并且修改rel=“stylesheet/less”
2. 在引入的less文件后，再引入lessc.js文件
3. 以服务器模式打开页面（live Server插件）此时less文件可以直接被解析并渲染页面样式
手动命令编译
1. 下载nodejs环境和less环境
2. 在less所在文件中打开命令窗口输入 lessc mystyle.less mystyle.css
3. mystyle.less 被编译为 mystyle.css

4.2.8 less-混入

less可以借助函数的方式，节约代码编译css

简单混入

/* less文件中-定义常用css代码快 */
.br {-moz-border-radius: 40%;-webkit-border-radius: 40%;-ms-border-radius: 40%;-o-border-radius: 40%;border-radius: 40%;
}
/* less文件中-使用常用css代码块 */
.box {.br()
}/* css中的效果 */
.box {-moz-border-radius: 40%;-webkit-border-radius: 40%;-ms-border-radius: 40%;-o-border-radius: 40%;border-radius: 40%;
}

带参数混入

/* less文件中-定义常用css代码快 */
.br(@deg) {-moz-border-radius: @deg;-webkit-border-radius: @deg;-ms-border-radius: @deg;-o-border-radius: @deg;border-radius: @deg;
}
/* less文件中-使用常用css代码块 */
.box1 {.br(30%)
}
.box2 {.br(20%)
}/* css中的效果 */
.box1 {-moz-border-radius: 30%;-webkit-border-radius: 30%;-ms-border-radius: 30%;-o-border-radius: 30%;border-radius: 30%;
}
.box2 {-moz-border-radius: 20%;-webkit-border-radius: 20%;-ms-border-radius: 20%;-o-border-radius: 20%;border-radius: 20%;
}

带初始值参数的混入

/* less文件中-定义常用css代码快 */
.br(@deg:50%) {-moz-border-radius: @deg;-webkit-border-radius: @deg;-ms-border-radius: @deg;-o-border-radius: @deg;border-radius: @deg;
}
/* less文件中-使用常用css代码块 */
.box1 {.br()
}
.box2 {.br(20%)
}/* css中的效果 */
.box1 {-moz-border-radius: 50%;-webkit-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;
}
.box2 {-moz-border-radius: 20%;-webkit-border-radius: 20%;-ms-border-radius: 20%;-o-border-radius: 20%;border-radius: 20%;
}

4.2.9 less、sass、scss、stylus关系

less、sass、scss、stylus 以上4种都是css的预处理语言
sass是最早的css预处理语言
scss是sass3版本延伸出来的新语法
less比sass简单
sass比less强大
scss和less语法接近
sass老版和stylus语法接近
less、sass、scss、stylus 都是css的预处理语言，学好其中一个即可，其他功能类似。

4.3 vw/vh布局

vw/vh是相对单位，相对于视口的相对单位

1、vw

vw把页面宽度分成100份，那么1个vw相当于屏幕视口的1%，而省略了媒体查询的过程，操作简单。
当屏幕宽度为375时，100个vw就是375px。所以1个vw就是3.75。10个vw就相当于37.5px

2、vh

vh把页面高度分成100份，那么1个vh相当于屏幕视口的1%
iphoneX的手机屏幕是375*812 1个vh相当于8.12 那么10个vh相当于81.2px

3、小结

vw、vh是相对单位，相对于手机设备屏幕的大小
1vw = 1% 的屏幕宽度
1vh = 1% 的屏幕高度
vw/vh做移动端适配，需要less帮忙计算使用vw ：具体元素大小 / 屏幕设备的1vw值使用vh ：具体元素大小 / 屏幕设备的1vh值
屏幕比例不一致，所以请统一，要不使用vw，要不使用vh

rem 和 vw / vh 的区别

rem:

市场比较常见： 1. 需要不断修改html文字大小 2. 需要媒体查询media 3. 需要 flexible.js

vh/vw:

将来(马上)趋势 1. 省去各种判断和修改代表： b站…

四、响应式

响应式布局：一套代码适配不同的屏幕设备，在不同屏幕尺寸下显示不一样的结构。屏幕尺寸不可能是精确值，所以肯定为区间

媒体特性常用写法：max-width、min-width

@media(媒体特性){

选择器{

样式

}

完整写法：

max-width:768px 。max-width是最大宽度，所以当视口宽度小于等于时触发
min-width:1200px。min-width是最小宽度，所以当视口宽度大于等于时触发
媒体查询应该按照从小到大的顺序来写

@media (min-width: 768px) {body {background-color: pink;}
}
@media (min-width: 992px) {body {background-color: green;}
}
@media (min-width: 1200px) {body {background-color: skyblue;}
}

如果按照从大到小的顺序来写，后面的小的区间会因为层叠性覆盖大的区间，导致大区区间失效

媒体查询的link写法的效果是什么？

<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">

视口宽度大于等于992px时当前link生效

<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

视口宽度大于等于1200px时当前link生效

京东电商网页做响应式的原则是通过媒体查询来判断是否进入小屏区间，如果处于小屏区间隐藏部分元素，达到适配的目的

1、bootstrap

介绍： bootstrap是一个前端框架，包含大量的css和js，让我们快速搭建出网站。包含以下结果大块：
1. 全局css样式
2. 组件
3. js插件
4. 定制
下载：https://www.bootcss.com/ 官网下载bootstrap3版本（稳定）生产环境：体积小、压缩过、看不懂源码：体积大、没有压缩、方便学习
使用：
- 静态页面搭建
  1. 引入bootstrap.min.css
  2. 根据文档说明调用类名（大部分都是cv操作，栅格系统除外）
- 带基本交互的页面搭建
  1. 引入bootstrap.min.css
  2. 引入jquery.min.js
  3. 引入bootstrap.min.js
  4. 根据文档说明调用类名（大部分都是cv操作）,需要额外修改和添加数据和素材
- 栅格系统（是bootstrap的核心，唯一需要理解的地方）
  1. 栅格系统（原理是媒体查询）
  2. 栅格系统，将屏幕划分4种，并用4各种代码分别表示，超小屏（xs）、小屏幕（sm）、中屏幕（md）、大屏幕（lg）
  3. 栅格系统，将页面划分为12份，可以灵活布局比如大屏幕（lg）一排显示6个同时超小屏一排显示2个，代码：col-lg-2 col-xs-6

2、AlloyTeam-项目小结

bootstrap的核心是栅格系统
bootstrap其他样式和效果不需要记，了解功能即可
使用bootstrap开发项目，大部分操作都是CV操作。
使用bootstrap开发项目，存在差异化，可以覆盖css达到效果
使用bootstrap开发项目，情况比较复杂还可以定时框架
电商站一般不会做成响应式，因为内容太多，建议把pc和移动端完全独立开

移动Web基础知识整理相关推荐

Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
使用Aspose.Cells的基础知识整理
使用Aspose.Cells的基础知识整理转自 http://www.cnblogs.com/kenblove/archive/2009/01/07/1371104.html 这两天用Aspose. ...
Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾维持访问在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
HTML5的基础知识整理
HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言一.HTMl ...
python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
计算机二级c语基础知识,计算机二级C语基础知识整理.doc
计算机二级C语基础知识整理 1.1 算法算法:是一组有穷指令集,是解题方案的准确而完整的描述.通俗地说,算法就是计算机解题的过程.算法不等于程序,也不等于计算方法,程序的编制不可能优于算法的设计. ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
centos7创建asm磁盘_Oracle ASM 磁盘组基础知识整理（收藏版）
为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的,前两周里因一套生产环境数据库磁盘不足无法对其进行表空间扩容,需要向存储岗申请存储资源,当存储岗划好资源加完存 ...