-
移动端特点(了解即可)
1.移动端和PC端网页不同点:
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
2.谷歌模拟器:
利用谷歌模拟器可以在电脑里面边写代码边调试移动端网页效果
3.分辨率:
屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
物理像素点：显示图像最小单位
PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
提醒：制作网页参考的是逻辑分辨率
4.视口
手机屏幕尺寸都不同， 网页宽度应该设为100%，让网页的宽度和逻辑分辨率尺寸相同。(默认情况下，网页的宽度和逻辑分辨率不同，默认网页宽度是980px。)
问题：如何让网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
语法：
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
说明：
width=device-width ---- 设备的宽度和视口(页面)宽度相等
initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不允许缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
5.二倍图
使用二倍图目的: 为了在高分辨率下图片不会模糊失真
-
百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
-
Flex布局
1.说明
Flex布局， 又叫弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
2.作用：
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生，Flex布局非常适合结构化布局。
3.弹性布局相对于浮动布局：
①没有需要清除浮动；
②布局更加的灵活
4.设置方式：
父元素添加 display: flex，子元素可以自动的挤压或拉伸
5.组成部分：
①弹性容器：设置了display: flex的父盒子，默认宽度和父元素宽度一样，默认的高度由内容所撑开
②弹性盒子：弹性容器的最近一级子元素(仅限于亲儿子子元素)
- 默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
- 没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
- 默认不换行，宁愿牺牲自己的宽度，都不会自动换行
③主轴：调节主轴的对齐方式来设置盒子之间的间距。(写在父盒子里面)
④侧轴 / 交叉轴：调节侧轴的对齐方式来设置盒子之间的间距。(写在父盒子里面)
6.主轴对齐方式：
修改主轴对齐方式属性: justify-content
属性值:
①flex-start: 默认值，从父元素的左边开始显示
书写: justify-content: flex-start;
②flex-end: 让弹性盒子整体，显示在弹性容器的右侧
书写: justify-content: flex-end;
③center: 让弹性盒子整体，显示在弹性容器的中间
书写: justify-content: center;
④space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2
书写: justify-content: space-around;
⑤space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0
书写: justify-content: space-between;
⑥space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等
书写: justify-content: space-evenly;
7.侧轴对齐方式：
修改侧轴对齐方式属性:
align-items： 添加到弹性容器，控制所有弹性盒子的整体排布
align-self： 单独控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
注意：
align-self的属性值和align-items是一样的
属性值:
注意:
stretch 垂直拉伸：沿着侧轴(垂直)方向拉伸弹性盒子的高度直到父元素一样高(让子盒子和父盒子一样高)，但此时的弹性盒子不能设置高度(高度空着不写,也不能写为0)
8.伸缩比:
使用flex属性修改弹性盒子伸缩比
属性： flex : 值;
取值分类： 数值(整数)
伸缩比：flex 给弹性盒子添加
①所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
②其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的所有宽度
注意： flex值只占用父盒子剩余尺寸
9.总结
弹性容器设置的属性： display: flex，justify-content，align-items
弹性盒子设置的属性：align-self，flex
-
补充
1.单词
2.每日一句鼓励自己的话:
很多时候不是你做不到,而是你放弃了
