开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第N天，点击查看活动详情

关键字

一些特殊意义的字符串，这些字符串表示特定的值。

例如： none，underline等

绝对单位

放在哪里都一样大。

长度单位

像素px、毫米mm、厘米cm、英寸in、点pt【印刷术语。1/72英寸】、排卡【印刷术语，12点】

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

相对单位

定义

会根据外部因素发生变化的单位

好处

为网页带来了后期绑定（late-binding）的样式，即，直到内容和样式都完成了，二者才会结合起来。

计算值

浏览器会根据相对单位的值计算出绝对值，称作计算值

em与rem

em

应用场景

em 是最常见的相对长度单位，适合基于特定的字号进行排版。

但是若是设定font-size时，最好使用rem

度量非字号属性时

1em 等于当前元素的字号，其准确值取决于作用的元素。

度量字号属性时

当前元素的字号决定了 em。 但是，如果声明 font-size: 1.2em，那么当前字号自然是根据继承的字号来计算的

注意事项：

当用 em 来指定多重嵌套的元素的字号时，每一级都会根据当前级数继承的字号来重新计算大小，所以可能会出现使用同一个样式但是字号逐渐变小的情况

例如

<ul>

    <li>Top level

        <ul>

            <li>Second level

                <ul>

                    <li>Third level

                        <ul>

                            <li>Fourth level

                                <ul>

                                    <li>Fifth level</li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

body {

font-size: 16px;

}

ul {

font-size: .8em;

}

会发现每一个字体比上一级要小，因为样式在落定时才开始计算的，由于所有的ul的字号都使用同一个样式0.8em，且ul都是相互嵌套的，所以当前ul将会是上一级ul字号的0.8倍。所以会不断缩小。

解决方案

rem

rem 不是相对于当前元素，而是相对于根元素的单位。

所以不管在文档的什么位置使用 rem，1.2rem 都会有相同的计算值

视口相对单位

vh

视口高度的1/100

vw

视口宽度的1/100

vmin

视口宽、高中较小的一方的 1/100（IE9 中叫 vm，而不是 vmin）

vmax

视口宽、高中较大的一方的 1/100

持续更新中