简述 rpx、px、em、rem、%、vh、vw的区别
设备物理像素
pt 屏幕宽/分辨率，其中每一小份就是1pt
css像素
px pc机大屏幕显示器，1px约等于0.76个物理像素
手机小屏幕
以iPhone6为标准，物理像素750，分辨率375
1px=2pt
所以，px也是一个相对单位
px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。
但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px
通常PC端大屏浏览器的网页，使用px单位较多
移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小
rem
以网页根元素<html>元素上设置的默认字体大小为1rem
默认1rem=16px
用的多
好处
可以实现响应式布局了！
响应式布局指的是元素大小能根据屏幕大小随时变化。
因为 所有以rem为单位的位置、大小都跟着根元素字体大小而变化。
所以只要在屏幕大小变化的时候改变根元素font-size就行了。
em
父元素的字体大小为1em
用的不多
rpx
小程序专用
以iPhone6为标准，物理像素750，分辨率375
无论屏幕大小，都将屏幕分成750份，每份就是1rpx。
1rpx=0.5px=1pt
优点
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
vw/vh
CSS3 特性 vh 和 vw：
vh ，无论视口高度多少，都将视口高均分为100份，每1小份就是1vh，所以，也是相对单位，可随视口大小变化而自动变化。
vw ，无论视口宽度多少，都将视口宽均分为100份，每1小份就是1vw，所以，也是相对单位，可随视口大小变化而自动变化。
所以vw和vh，本质就是%
这里是视口指的是浏览器内部的可视区域大小
%
通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
但是，绝对定位时，就不一定参照父元素的宽和高了。而是参照最近的定位元素的包含padding的宽和高
因为%不总是相对于父元素的宽高或屏幕大小，所以，有坑，开发少用。
水平居中和垂直居中的总结
水平居中
前提
1，父元素必须是块级盒子容器
不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素
- 的子一级)。
2.父元素宽度必须已经被设定好
场景1: 子元素是块级元素且宽度没有设定
不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么它会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致
场景2：子元素是行内元素，子元素宽度是由其内容撑开的
这种情况下解决方案是给父元素设定text-align:center;
场景3：子元素是块级元素且宽度已经设定
1.给子元素添加margin:0 auto;
2.通过计算指定父元素的padding-left或padding-right
给父元素和子元素都设定了box-sizing:border-box
(父宽-子宽)/2 3.计算得到子元素的margin-left或margin-right
给父元素和子元素都设定了box-sizing:border-box
(父宽-子宽)/2 4.通过子元素相对父元素绝对定位
父相子绝
子：left:50%; margin-left: -子宽一半
子: left:50%; transform:translateX(-50%)
5.弹性布局
父
display:flex;
flex-direction: row;
justify-content:center;
垂直居中
前提:父元素是盒子容器
场景1：子元素是行内元素，高度是由其内容撑开的
单行：设定父元素的line-height为其高度来使得子元素垂直居中
多行：通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决
场景2：子元素是块级元素但是子元素高度没有设定
解法1：通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决
解法2：flexbox
父元素
display: flex;
flex-direction: column;
justify-content: center;
场景3：子元素是块级元素且高度已经设定
解法1：计算子元素的margin-top或margin-bottom
给父元素和子元素都设定了box-sizing:border-box
(父高-子高)/2
解法2：计算父元素的padding-top或padding-bottom
给父元素和子元素都设定了box-sizing:border-box
(父高-子高)/2
解法3：利用绝对定位，让子元素相对于父元素绝对定位
父相子绝
子元素宽已知
子：top:50%; margin-top: -子高一半
子元素宽未知
子: top:50%; transform:translateY(-50%)
解法4：利用flexbox
父元素
display: flex;
flex-direction: column;
justify-content: center;
总结：垂直和水平方向同时居中
父相子绝
已知子元素宽高
top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半
未知子元素宽高
top:50%; left:50%; transform:translate(-50%, -50%)
弹性布局
.son{
display: flex;
justify-content: center;
align-items: center;
}
