像素px 最常见的单位，很多其他单位都会最终映射成像素。这个单位我们会在后面详细解析。
英寸in 1in = 2.54cm = 96px
厘米cm 1cm = 10mm = 96px/2.54 = 37.8px
毫米mm 1mm = 0.1cm = 3.78px
1/4毫米q 1q = 1/4mm = 0.945px
点pt 1pt = 1/72in = =0.0139in = 1/72_2.54cm = 1/72_96px = 1.33px 7.派卡pc 1pc = 12pt = 1/6in = 1/6*96px = 16px

3. 相对长度单位

3.1 相对字体大小的长度单位

3.1.1 em

em相对于应用在当前元素的字体尺寸。如果用于font-size属性本身，相对于父元素的font-size计算；若用于其他属性，相对于元素本身的font-size计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1</title>
    <style>
        .outer {
            font-size: 20px;
        }
        .div1 {
            /*相对于父元素，大小为40px*/
            font-size: 2em;
            /*相对元素本身，高度为5*40=200px*/
            height: 5em;
            background-color: green;
        }
        .div2 {
            /*相对于父元素，高度为5*20=100px*/
            height: 5em;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
    <div class="div2">div1</div>
</div>
</body>
</html>

3.1-1

3.1-2

3.1.2 rem

rem相对于根元素的字体尺寸。IE8不兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-1</title>
    <style>
        html {
            /*浏览器默认字体大小16px，所以根元素字体大小2*16=32px*/
            font-size: 2rem;
        }
        .outer {
            /*字体大小3*32=96px*/
            font-size: 3rem;
        }
        .div1 {
            /*字体大小32px*/
            font-size: 1rem;
            /*高度5*32=160px*/
            height: 5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>

3.1.2-1

但是根部元素设置成rem或者使用默认大小不方便计算，所以一般将根部元素字体大小设置为100px。为什么不是10px呢，因为chrome下字体大小最小为12px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-2</title>
    <style>
        html {
            /*根元素字体大小100px*/
            font-size: 100px;
        }
        .outer {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
        }
        .div1 {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
            /*高度0.5*100=50px*/
            height: 0.5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>

3.1.2-2

3.1.3 ex

ex是指所用字体中小写x的高度，不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值。

ex在实际中常用于微调。

3.1.4 ch

ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。

IE8-不支持。

ch在实际中主要用于盲文排版。

3.2 相对视窗宽高的长度单位

视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，它们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在。

关于视窗相关的单位有vh、vw、vmin、vmax4个单位。

兼容性上，IE8-不支持，IOS7.1-不支持，android4.3-不支持。(对于vmax，所有IE浏览器都不支持)

另外，黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化。

3.2.1 vh

布局视窗高度的1/100

设置height:100vh;可以达到与屏幕等高的效果。

3.2.2 vw

布局视窗宽度的1/100

设置width:100vw;可以达到与屏幕等宽的效果。

3.2.3 vmin

布局视窗高度和宽度之间的最小值的 1/100

设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。

3.2.4 vmax

布局视窗高度和宽度之间的最大值的 1/100

设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

参考

runoob.com css单位

深入理解CSS中的长度单位

CSS入门

CSS入门13-单位详解

1. 简介

2. 绝对长度单位