CSS 单位与百分比值详述

单位是我们控制尺寸的重要工具，也是我们在编写 CSS 代码时会经常使用到的。CSS 的单位主要分成两种：绝对单位和相对单位。

绝对单位

CSS 中的绝对单位包括：mm（毫米），cm（厘米），in（英寸），pt（点），pc（派卡）。

• mm，cm，in 这三个都很好理解，就是我们拿着尺子对着屏幕量出来的真实宽度。不过说起来，现在全世界貌似只有美帝还在使用英寸作为长度单位，从侧面也可以看出美帝的影响力。（1英寸=2.54厘米）
• pt 和 pc 这两个倒是不怎么常见。其中，pt（点）其实是一种标准印刷度量单位，长度上1英寸=72点。pc（派卡）也是印刷术语，1派卡=12点=1/6英寸。

事实上，我们很少需要用到绝对单位。因为一般来说我们网页需要在各种不同大小的屏幕上显示，使用绝对长度很难确保内容显示的一致性。

相对单位

CSS 中的相对长度单位包括：px（像素），em，ex，ch，rem，vw，vh，vmin，vmax

• px（像素），像素就是显示器上的一个点。关于 px 是相对长度单位还是绝对长度单位这一点有争议，MDN把 px 归为绝对单位，而《CSS权威指南（第三版）》中则把它归为相对单位（因为取决于显示设备的分辨率）。
• em，ex，ch。1em 被定义为一种给定字体的 font-size 值。比方说一个元素的 font-size 为 20px，那么对于这个元素，1em=20px。另外如果没有为当前元素指定 font-size，但是因为font-size值是会继承的，所以会取父元素的值。举个栗子：

<div>
    <p>Lorem ipsum <span>foo bar</span></p>
</div>
div {font-size: 20px;}
p {font-size: 1.2em;} //计算值为 20px*1.2 = 24px
span {font-size: 0.8em;} //计算值为 20px*1.2*0.8=19.2px

• ex，ch。理论上，ex 是指所用字体中小写 x 的高度，ch 是指所用字体 0 的宽度，但是浏览器对两个单位的支持有限，很多浏览器的实际做法是取1ex=0.5em。
• rem，即 root em，是 CSS 3中新定义的单位。与 em 类似，不过 rem 永远是以默认基础字体大小为参照的，继承的字体大小不会影响它。我们可以基于rem这一特性构建出响应式布局。一般浏览器默认的字体大小都是16px。
• vw，vh，即 viewport width 和 viewport height，也是 CSS 3 中新添加的单位。1vw = 1/100 视口宽度（viewport width），1vh = 1/100视口高度（viewport height）。
• vmin，vmax，这两个也是 CSS 3 新定义的视口单位。其中，vmin 取 vw 与 vh 中较小的那个单位，vmax 则相反取较大的那个。

百分比

百分比值是 CSS 中非常常用的一种数值，也是很多新手很容易困惑的地方。形式上百分比值就是实数+百分号（%）。因为百分比值几乎总是相对于另一个值的，而对于不同的属性，选择的参考值也是不同的，所以得到的计算值也会不同。

要想真正掌握百分比值的计算，首先要了解包含块（MDN）的概念。大多数情况下，包含块就是父级块元素的 content 区域，即内容区。

参考资料

1. 《CSS 权威指南（第三版）》
2. CSS 的值和单位 - MDN
3. All about the containing block - MDN
4. CSS percentage values - MDN