在CSS中存在众多的长度单位，它们又有什么意思与用途呢？
在CSS中，长度单位分为两种，绝对长度与相对长度
绝对长度：px,cm,in,mm,pt,px,px
相对长度：%,em,rem,vh,vw,vmin,vmax,fr
绝对长度
px:即像素pixel，它是最基础也是最常用的一个长度单位
cm:即厘米， 1cm=37.8px
mm:即毫米，1mm=3.78px
in：即英尺inch， 1in=2.54cm=96px
pt:即点point，1pt=1/72in=1.33px
pc:即派卡，1pc=12pt=16px，派卡是印刷行业的长度单位
相对长度
em:一个字符大小，字符大小在浏览器中默认为16px
rem:相对于根元素HTML的字体大小，我们将HTML字体大小设置为100px，则可以更为方便的计算
%：百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）
vh:视口高度，默认为视口高度的1%
vw：视口宽度，默认为视口宽度的1%
vmin：布局视口高度和宽度之中值较小的那个的 1/100
vmax：布局视口高度和宽度之中值较大的那个的 1/100
fr:grid布局中利用的一个长度单位。在gird布局中，我们经常会利用fr来进行计算
grid-template-rows: 30px 1fr 2fr;
上面这句语句则是声明三行的grid，第一行的高度为30px,第二行的同样为30px，第三行的为60px
关于使用%时，如何确定其相对于谁可参考以下文章：https://www.cnblogs.com/jesse131/p/9079219.html