一、单位名称
px:像素。 em:根据父元素的font-size来计算，自身有font-size的按自身来计算。 rem:根据根元素font-size计算。 vw:浏览器视窗宽度的x% vh:浏览器视窗高度的x%
二、单位定义
1）px 像素
能够定址和分配颜色值的最小单位
像素（Pixel）：Picture Element（图形元素）的简称，屏幕颜色与强度的一个单位。像素其实是能够定址和分配颜色值的最小单位。
2）em 相对长度单位
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸。
个人理解：
如果有对象，标签
样例文字
注意点： p未设置的样式会继承父级div的样式
div设置了字体大小为16px ,那么‘样例文字’ 的大小是相对div设置的16px来定义的，也就是的 16px = 1em，如果div内部元素要设置em单位样式的话，就是按照16px:1em来处理的，‘样例文字’ 大小默认就是1em (16px)，如果给p文字设置了 2em 字体大小，实际上就是32px.
所以网页body设置文字大小为 16px , 内部全部使用em单位，都不使用px单位时 都按照 1em ： 16px 计算；更改body 文字大小 会影响全局的样式。否则设置em单位就要看当前继承了哪个父级的px, 就以谁为准。
实际操作证明了是这么理解的，不存在只去找根元素的大小来计算，而是以继承了哪个父级元素的大小来计算的。那么，相对于当前对象内文本的字体尺寸计算em 就非常容易理解了。
3）rem 根据根元素font-size计算
个人理解：
特意去找了一下这个根指的是啥？
如果有对象，标签
样例文字
首先：以为body是根，遂更改了 font-size为 20px，字体没有变化。证明body不是根元素。
第二次：直接在最外层 设置了 ，字体没有变化； 当我设置为20px时，根元素找到了（这里有点菜了，基础知识来的），字体变化了，足以证明我的当前网页上默认字体确实是16px；。
根元素目前看来是:
实际证明：无论将父级设置了多大字体，只要不是改变根元素字体大小；字体虽设置了rem单位，但是不会改变大小，反之亦然。
还有种说法是 ，换算下来刚好 1rem对应10px 。 怎么计算的呢 10px * (1/16px) = 62.5 ， 也就是说按照默认16px计算的。
4）vw:浏览器视窗宽度的x%
vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%
值得注意的是: 这里的vw宽度是和视口宽度有关系
实践证明：父级元素设置了百分比，例如 width:50%，子元素设置了vw 例如 width:60% ，分别加上boder 使用颜色区分开会发现，子元素的宽度超出了父级元素的宽度。
5）vh:浏览器视窗高度的x%
与vw同理
发现：
在布局时宽度不设置，默认会平铺整个屏幕，在浏览器内打开F12调试时（调试窗在左边），左右拖动与文档分割线时宽度会自适应；而设置了100vw时，宽度不会自适应，是以浏览器窗口宽度为准，左右拖动与文档分割线时没有变化；拖动浏览器窗口宽度会跟随变化。
高度的计算方式有点不一样，没有设置时是auto；一般设置铺满屏幕时，将html body 设置 100% ，我看有的也会设置成100vh;
有趣的是，html body 都没有设置高度 ，内部子元素A设置了500px; 在A内部设置了一个子元素B，将B高度设置为100vh ，会直接超过A的高度，且直接忽视body的margin和padding ，超出body的高度，因为vh是视口高度。
