在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