px
px 是绝对单位，也是 web 前端最为常见的单位，px表示像素，它的值不会受其他元素或其他值的影响。
%
% 是相对单位，将元素的单位设置为百分比的形式后，浏览器将会根据其父元素的样式来计算该值。
这样使用的好处是，当父元素的大小发生变化时，子元素也会按照比例发生改变。
rem
rem 是相对单位，相对于根(html)元素的字体大小。比如根元素字体大小为16px（16px也是浏览器默认的字体大小），那么如果有一个元素的fontsize为2rem，则该2rem相当于是32px。
rem不受其他因素的影响，与 em 不同的是，它没有嵌套的效应。因此，rem常被当做“相对布局”的单位首选，尤其在移动端。
rem 应用于响应式布局，常常会结合媒体查询 @media 使用。
em
em 是相对单位。
在 font-size 中使用是相对于父元素的字体大小，而在其他属性中使用是相对于自身的字体大小，如 width。
可以通过下面这个例子理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="font-size: 15px">
hello Word ！
<p style="font-size: 2em;width: 2em;">em是相对长度单位</p>
</div>
</body>
</html>
p元素的fontsize和width都是2em，但表示的意义不同。
fontsize的2em，是相对于父元素 fontsize：15px的2倍，即 30px。
而 width 的2em，是自身fontsize：2em的2倍，即 60px。
vw 和 vh
vw 和 vh 都是相对于视口，即设备屏幕可视区域。取值范围都是 [0,100]
1vw 表示可视区域的宽度的 1%。100vw即表示可视区域的全部宽度。
1vh 表示可视区域的高度的 1%。100vh即表示可视区域的全部高度。
关于长度 0
如果长度为0，则不需要单位标识符。
否则，单位标识符都是必须的，不区分大小写，并且必须紧跟在值的数字部分之后，中间没有空格。