19、CSS 样式基础入门

CSS 样式基础入门

1. 测量单位

在网页开发中，有不同的测量单位，可分为绝对单位和相对单位。

1.1 绝对单位

绝对单位是具体且可一致测量的，不会改变。常见的绝对单位如下表所示：
| 单位 | 等于 |
| — | — |
| 1 英寸 | 2.54 厘米、72 点、96 像素 |
| 1 厘米 | 10 毫米 |
| 1 皮卡（pc） | 1/6 英寸、12 点 |
| 1 点（pt） | 1/72 英寸 |
| 1 像素（px） | 1/96 英寸 |

在 CSS 中，1 像素是 1 英寸的 1/96，常用于描述图像大小。不过，像素测量可能有些复杂，计算机显示器上的像素是由红、绿、蓝光组合而成的色点，不同显示器的像素密度（每英寸像素数）可能不同。

1.2 相对单位

相对单位基于其他对象的大小，相同的相对测量值可能因所关联的值不同而具有不同的物理测量值。常见的相对单位如下表：
| 相对单位 | 等同于 |
| — | — |
| em | 当前元素字体大小的倍数（例如，0.5em = 字体大小的 1/2） |
| rem | 根元素大小的倍数（在 CSS 中，根元素是浏览器中 HTML 元素的默认字体大小，除非指定了 HTML 元素的字体大小，此时指定的大小将为 1rem） |
| vw | 相对于浏览器窗口宽度的 1%（例如，在宽度为 6.9 厘米的智能手机上，10vw 为 0.69 厘米） |
| vh | 相对于浏览器窗口高度的 1%（例如，在高度为 10 英寸的笔记本电脑