单位
大约 2 分钟
CSS 有几种表示长度的不同单位。
许多 CSS 属性接受 “长度” 值。例如：width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字。例如：10px、2em 等。
- 数字和单位之间不能出现空格。但是，如果值为
0，则可以省略单位 - 对于某些 CSS 属性，允许使用负的长度
- 长度单位有两种类型 绝对单位 和 相对单位
绝对长度
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们。例如：用于打印布局（print layout）。
| 单位 | 描述 | TIY |
|---|---|---|
| cm | 厘米 | 试一试 |
| mm | 毫米 | 试一试 |
| in | 英寸（1in = 96px = 2.54cm） | 试一试 |
| px * | 像素（1px = 1/96th of 1in） | 试一试 |
| pt | 点（1pt = 1/72 of 1in） | 试一试 |
| pc | 派卡（1pc = 12 pt） | 试一试 |
提示
* 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素
相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
| 单位 | 描述 | TIY |
|---|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） | 试一试 |
| ex | 相对于当前字体的 x-height（极少使用） | 试一试 |
| ch | 相对于 "0"（零）的宽度 | 试一试 |
| rem | 相对于根元素的字体大小（font-size） | 试一试 |
| vw | 相对于视口 * 宽度的 1% | 试一试 |
| vh | 相对于视口 * 高度的 1% | 试一试 |
| vmin | 相对于视口 * 较小尺寸的 1% | 试一试 |
| vmax | 相对于视口 * 较大尺寸的 1% | 试一试 |
| % | 相对于父元素 | 试一试 |
提示
em 和 rem 单元可用于创建完美的可扩展布局
* 视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50cm，则 1vw = 0.5cm