一、px，em，rem、vw、vh、pt
1.px (pixel，像素)
是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。px 单位的值必须是整数值.
与px相关的一些单位
in - 表示英寸，是一个物理单位，在CSS中被直接映射成为px; 转换的方法是 1in = 96px
cm - 表示厘米，在生活中常用的单位，同样被映射为 px; 转换方法为 1cm = 37.8px
mm - 表示毫米，与cm类似，转换方法为 1mm = 0.1cm = 3.78px
2.em(相对长度单位，相对于当前对象内文本的字体尺寸)
是一个相对长度单位，指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
3.rem(root em，根em)
rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标：rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比rem单位和px单位很容易进行换算，方便我们按照标注稿写css
rem与em的区别
rem是相对于根元素（html）的字体大小
em是相对于其父元素的字体大小em最多取到小数点的后三位
4.vw、vh
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
各个单位具体的含义如下：单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvminvw和vh中的较小值vmax vw和vh中的较大值 这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。
vw和%的区别为：
%大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vh相对于视窗的尺寸
5.pt （点）
绝对长度单位，多用于字体尺寸，1px = 0.75pt
in:寸
cm:厘米
mm:毫米
q: 1/4毫米（quarter-millimeters）。绝对长度单位。
pt:point，大约1/72寸
pc:pica，大约6pt，1/6寸
1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px
6.%
一般宽泛的讲是相对于父元素，但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）