CSS 单位
CSS 单位
CSS 有几种不同的单位可以用来表示长度。
许多 CSS 属性都接受“长度”值，例如 width、margin、padding、font-size 等。
长度 是一个数字后跟一个长度单位，例如 10px、2em 等。
注意： 数字和单位之间不能有空格。但是，如果值为 0，则可以省略单位。
对于某些 CSS 属性，允许使用负长度。
长度单位有两种：绝对单位和相对单位。
绝对长度单位
绝对长度单位是固定的，用任何这些单位表示的长度都将显示为确切的尺寸。
不推荐在屏幕上使用绝对长度单位，因为屏幕尺寸差异很大。但是，如果输出媒介已知（例如用于打印布局），则可以使用它们。
| Unit | 描述 |
|---|---|
| 厘米 | 厘米 尝试 |
| 毫米 | 毫米 尝试 |
| in | 英寸 (1英寸 = 96px = 2.54厘米) 尝试 |
| px * | 像素 (1px = 1/96 英寸) 尝试 |
| pt | 点 (1pt = 1/72 英寸) 尝试 |
| pc | 派卡 (1pc = 12 pt) 尝试 |
* 像素 (px) 相对于观看设备。对于低分辨率设备，1px 是显示器的 1 个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
相对长度单位
相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染媒介之间具有更好的可伸缩性。
| Unit | 描述 | |
|---|---|---|
| em | 相对于元素的 font-size (2em 表示当前字号的 2 倍) |
试一试 |
| ex | 相对于当前字体的 x 字高 (很少使用) | 试一试 |
| ch | 相对于“0”（零）的宽度 | 试一试 |
| rem | 相对于根元素的 font-size |
试一试 |
| vw | 相对于视口*宽度的 1% | 试一试 |
| vh | 相对于视口*高度的 1% | 试一试 |
| vmin | 相对于视口*较小尺寸的 1% | 试一试 |
| vmax | 相对于视口*较大尺寸的 1% | 试一试 |
| % | 相对于父元素 | 试一试 |
提示： em 和 rem 单位在创建完美可伸缩的布局方面非常实用！
* 视口 = 浏览器窗口的大小。如果视口宽度为 50 厘米，则 1vw = 0.5 厘米。
浏览器支持
表格中的数字表示完全支持该长度单位的第一个浏览器版本。
| 长度单位 | |||||
|---|---|---|---|---|---|
| em、ex、%、px、cm、mm、in、pt、pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh、vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
