一.分辨率
1.逻辑分辨率：屏幕的宽高
2.物理分辨率：拥有的物理像素点个数；
3.物理像素点：显示图像的最小单位，不可以被软件更改；
4.PPI（像素密度）：单位英寸内物理像素点越多，屏幕越清晰
二.流式布局
流式布局(百分比布局)：宽度设置百分比，高度固定
三.flex布局(！重点)
1.flex组成部分 display:flex;
a.弹性容器:默认宽度是父元素的宽度，默认高度由内容撑开
b.弹性盒子：默认宽度由内容撑开，默认高度为父元素的高度
c.主轴对齐方式（justify-content）:方向是水平
justify-content:flex-start;默认值，由父元素的起点开始显示，在左边
justify-content:flex-end;从父元素的终点开始显示，右边
justify-content:center;弹性盒子在弹性容器中水平居中
justify-content:space-around; 空白空间围绕在弹性盒子的两侧--首尾弹性盒子离弹性容器的距离，是弹性盒子与弹性盒子之间的距离的1/2
justify-content:space-between; 首尾的弹性盒子与弹性容器没有间隙，弹性盒子与 性盒子之间的空间间隙相等
justify-content:space-evenly; 平均空白缝隙，均分在弹性容器与弹性盒子之间.
d.侧轴对齐方式（align-items）:方向是垂直
align-items:flex-start;默认值，由父元素的起点开始显示，上边
align-items:flex-end;从父元素的终点开始显示，下边
align-items:center;让弹性盒子在垂直方向上居中
align-items: stretch ;默认值，让弹性盒子的高度沿着侧轴拉伸知道和父元素高度一样
e.给弹性盒子设置的属性：align-self
取值同上
f.伸缩比 flex：1；
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度。如果flex值不同，则根据比例分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1;.......则该盒子占据父元素剩余的宽度
注意
display:flex,主轴，侧轴对齐方式都是给弹性容器设置(父盒子)
align-self,flex:1都是给弹性盒子设置
