19、CSS 样式基础入门

CSS 样式基础入门

1. 单位度量

在日常生活中，我们使用不同的单位来进行测量，如英寸、厘米、夸脱或升。在网站开发里，也有各种不同的单位度量，并且在不同的场景下各有其适用性。

1.1 绝对单位

绝对单位是具体且可一致测量的，不会发生变化。常见的绝对单位有厘米（cm）、毫米（mm）、英寸（in）、像素（px）、点（pt）和皮卡（pc）。在级联样式表（CSS）中，1 像素等于 1 英寸的 1/96，常用于描述图像的大小。1 英寸始终等于 2.54 厘米，1 厘米始终等于 10 毫米，以此类推。

以下是绝对单位的换算关系：
| 单位 | 等于 |
| ---- | ---- |
| 1 英寸 | 2.54 cm、72 点、96 px |
| 1 cm | 10 mm |
| 1 pc | 1/6 英寸、12 点 |
| 1 pt | 1/72 英寸 |
| 1 px | 1/96 英寸 |

像素的测量可能比较特殊。CSS 中的像素是 1 英寸的 1/96，而计算机显示器上的像素是由红、绿、蓝光组合而成的彩色点。像素密度（每英寸像素数）会因显示器而异，所以 2560×1440 像素的显示器和 3840×2160 像素的显示器可能物理尺寸相同，但后者的像素密度要大得多。在开发网站时，要记住像素在不同的情境下有不同的含义。

1.2 相对单位

相对单位是基于其他对象的大小来确定的，所以相同的相对测量值在不同的关联值下可能对应不同的物理测量值。

常见的相对单位如下：
| 相对单位 | 等同于 |
|