1 、px

px就是pixel（像素）的縮寫，相對長度單位，相對于屏幕分辨率。

2、em

參考物是父元素的font-size，具有繼承的特點。瀏覽器默認字體是16px，整個頁面內1em不是一個固定的值。

字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計算下： class為id1的div字體大小繼承自父元素body：16px*1.5em = 24px class為id2的div字體大小繼承自父元素id1：24px*1.5em = 36px class為id3的div字體大小繼承自父元素id2：36px*1.5em = 54px

3、rem

rem是CSS3新增的一個相對單位，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

4、%

% 百分比，相對長度單位，相對于父元素的百分比值

元素寬高與字體大小使用區(qū)別：

（1）盡量使用相對尺寸單位

使用相對尺寸單位計量，則在調整頁面的布局的時候，不需要遍歷所有的內部DOM結構，重新設置內部子元素的尺寸大小。如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設置。

（2）字體尺寸盡量使用em、rem

為了字體大小的可維護性和伸縮性，推薦使用em，如果存在3層以及3層以上的字體相對尺寸的設置，可以考慮使用rem。

5、vh和vw

vh和vw相對于視口的高度和寬度， 1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度 比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易實現(xiàn)與同屏幕等高的框。