一、前言
css中常用的单位虽然并不算多，但可用的单位却非常之多，很容易让新手迷糊，所以本文的目的便是详解css中各种的单位用法。
同时注意，只要是需要长度的地方，这些单位都是可以直接用的，只不过前提是你得清楚它的运作逻辑，否则可能会导致最终的效果与你预想中的不一致。
二、px
在众多长度单位中，像素（px）是最基本的单位，毕竟我们电脑屏幕就是按像素作为单位丈量、设计的。
所以可以进一步说，它是一个“绝对”的值，不论你放在任何屏幕上，它的显示大小都不会变。
并且不仅仅是css，各种我们需要在电脑屏幕上显示、绘制的东西，其基本单位都是像素。
比如最常见的图片、视频，又或者使用一些其它开发工具用api在屏幕上绘图，基本都用的像素为基本单位，它可以保证精确性。
一个1920x1080的视频，意思就是该视频的图像大小为宽1920px、宽1080像素。
在css中便是以px作为后缀使用的，比如设置字体大小，就可以这样写：
font-size: 14px;
虽然使用起来很方便，但px这种过于精确的特性在某些时候会给我们的开发带来一定程度上的麻烦，因为事实上我们并不能保证用户会使用多大的屏幕来看我们的网页。
比如电脑屏幕较大，可能我们就像设置一个相对较大的值，看起来更加舒服。
可一旦将其放在手机屏幕上，由于像素是一个绝对的单位，此时依旧显示一个较大的值就会导致布局很难看，因为手机屏幕一般都比电脑要小的多。
这种时候我们希望的就是有一种单位能够自动适配屏幕大小，也就是“相对大小”。
三、em
em就是“相对单位”的一种，不过它是以字体大小为基准调整大小的，也就是font-size属性。
div{
font-size:16px;
width:2em;
}
就像上面使用这样，由于此时我设置了字体大小为16px，那么此时1em就等于16px，那么此时就相当于设置宽度为32px。
这样做的好处也是很明显的，可以让容器自动根据其内的字体大小调整自身的大小，我们仅需要修改字体大小即可。
如果当前容器没有设置字体大小，那么它就会去使用浏览器默认的字体大小作为参照，一般默认值就是16px。
四、rem
rem相当于是em的进阶版本，因为em仅是相对于当前容器字体的大小，很多时候调整起来是比较麻烦的，毕竟正常来说，一个网页的正常字体在各个容器中都是一个统一的大小。
而rem就是如此，它不再相对于当前容器的字体大小，而是相对于根标签html的字体大小作为基准。
比如：
html {
font-size: 16px;
}
div{
width:2rem;
}
此时1rem就等价于16px，此后你只需要更改html标签的字体大小，就能很容易的调整全局尺寸布局。
五、%
虽然前面两个也比较方便，但说实话我个人用的较少，因为它们均是根据字体大小作为基准来设置其它大小的。
而大多数时候我们都并不需要让容器去适配字体，需求量更大的其实是根据父标签大小设置子标签大小、或者根据屏幕大小设置本标签的大小。
这里的%符号便是解决前者这一麻烦的：
div{
width:100px;
div{
width:50%;
}
}
它的使用也很简单，就是数学上的百分比，而它的基准就是它的父标签。
比如这里由于设置了父div标签的宽度为100px，那么子div标签宽度设置为50%后，实际大小就是父标签的宽度乘以50%，也就是50px。
这种用法是极多的。
但要注意，%是相对于同一种属性的父标签，比如这里设置的宽度50%，那么就会找父标签的宽度作为基准进行获取。
如果设置的高度，那么也是同理。
六、vw、vh
通过%解决了子标签相对于父标签设置大小的问题，接下来要解决的就是标签相对于屏幕设置大小的问题。
解决方案就是使用vw与vh，这里的字母v代表view，也就是“视图”，而w代表width、h代表height。
所以简单来说，vw就是视图宽度，vh就是视图高度。
更加通俗的来说，可能理解为就是窗口的宽度和高度，而1vw实际上就是百分之一的窗口宽度大小，1vh便是百分之一的窗口高度大小。
因此我们常常想要让最外层的一个标签占满整个屏幕，那么就可以这样写：
div{
width:100vw;
height:100vh;
}
这是用的最多的写法。
或者还可以使用vmin，它代表vw、vh这两个中较小的那个，而vmax则代表较大的那个。
