就业班移动web第三天
一、了解移动端特点
a布局视口：移动端默认的页面宽度是980px，在没有视口标签的情况下
b理想视口标签：meta:vp（初始代码里）
width=device-width ---- 设备的宽度和视口(页面)宽度相等
initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
c分辨率
物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
物理像素点：显示图像最小单位
PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
二、Felx布局
用Flex布局模型灵活、快速的开发网页，避免浮动布局中脱离文档流现象发生。
设置方式：父元素添加 display: flex，子元素可以自动的挤压或拉伸
添加弹性布局 display:flex; df
默认宽度和父元素宽度一样，默认的高度由内容所撑开
弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行
a添加弹性布局：主轴对齐方式
1.justify-content: flex-start ——flex-start 默认值，从父元素的左边开始显示
2.justify-content:flex-end——flex-end让弹性盒子整体，显示在弹性容器的右侧
3.ustify-content: center——center 让弹性盒子整体，显示在弹性容器的中间
4.justify-content: space-around——space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2
5.justify-content: space-between——space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0
6.justify-content: space-evenly——space-evenly弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等
b添加弹性布局：侧轴对齐方式
1.align-items: flex-start——默认值 flex-start 从起点开始排列
2.align-items: flex-end——flex-end 从终点排列
3.align-items: center——center 垂直居中
4.align-items: stretch——默认值 stretch 垂直拉伸：沿着侧轴(垂直)方向拉伸弹性盒子的高度直到父元素一样高
- align-self: flex-start——align-self的属性值和aliga-itmes是一样的，控制某个弹性盒子在侧轴方向排列(align-self是给弹性盒子添加)
添加弹性布局：伸缩比
设置方式：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
弹性布局总结：
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex
