一.分辨率
屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
物理像素点：显示图像最小单位
PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
二.flex布局
1. 添加弹性布局 display:flex; df
弹性容器 display:flex;：
默认宽度和父元素宽度一样，默认的高度由内容所撑开
2.弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行
3.主轴对齐方式
/* 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 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */
4.侧轴
/* 添加弹性布局 df */
/* 侧轴对齐方式 ai */
display: flex;
/* 默认值 flex-start 从起点开始排列 */
/* align-items: flex-start; */
/* flex-end 从终点排列 */
/* align-items: flex-end; */
/* center 垂直居中 */
align-items: center;
/* 默认值 stretch 垂直拉伸：沿着侧轴(垂直)方向拉伸弹性盒子的高度直到父元素一样高 */
/* align-items: stretch; */
5.伸缩比
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
6.水平垂直居中
/* 水平居中 主轴居中 jcc */
justify-content: center;
/* 垂直居中 侧轴居中 aic */
align-items: center;
/* 能不能用定位？可以 */
/* 能不能用tf转换？可以 */
/*
浮动不会和df一起使用的
基础班学的属性，除了浮动不能配合df使用以外，其他的都可以
*/
/* position: relative; */
