CSS 支持多种单位用于指定长度、宽度、高度等属性。这些单位可以分为两类：绝对长度单位和相对长度单位，二者各有优缺，适用于不同场合，实现设计的目的。
绝对长度单位
绝对长度单位是 CSS 中用于指定长度的单位，它们在不同媒体（如打印和屏幕）上具有固定的物理尺寸。以下是一些常见的绝对长度单位：
cm（厘米）：1 厘米等于 96px / 2.54，即屏幕的 1 英寸的 96 像素除以 2.54。
mm（毫米）：1 毫米等于 1/10 厘米。
in（英寸）：1 英寸等于 2.54 厘米。
pt（点）：1 点等于 1/72 英寸。
pc（派卡）：1 派卡等于 12 点。
这些单位在打印时非常有用，因为它们可以确保页面元素的大小在不同的输出设备上保持一致。但在网页设计中，通常更常使用像素（px）或相对单位（如 em、rem）来实现更好的响应式设计。
| 单位 | 名称 | 相当于 |
|---|---|---|
cm | 厘米 | 1cm = 37.8px = 25.2/64in |
mm | 毫米 | 1mm = 1/10th of 1cm |
Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
in | 英寸 | 1in = 2.54cm = 96px |
pc | 派卡 | 1pc = 1/6th of 1in |
pt | 磅 | 1pt = 1/72nd of 1in |
px | 像素 | 1px = 1/96th of 1in |
相对长度单位
相对长度单位是 CSS 中用于指定长度的单位，它们相对于其他值进行计算，而不是绝对的物理尺寸。这使它们在响应式设计和排版中非常有用。以下是一些常见的相对长度单位：
em：em 是相对于元素的字体大小（font-size）计算的。例如，1em 等于当前元素的字体大小。
rem：rem 是相对于根元素（通常是 <html> 元素）的字体大小计算的。这使得 rem 单位在响应式设计中非常有用，因为它可以确保整个页面的一致性。
%（百分比）：百分比单位用于相对于父元素的百分比来计算值。例如，50% 的宽度意味着元素的宽度将是父元素宽度的一半。
vw（视窗宽度） 和 vh（视窗高度）：vw 和 vh 单位用于相对于视窗宽度和高度的百分比来计算值，分别表示视窗宽度的 1% 和视窗高度的 1%。
ch：ch 单位用于相对于 "0" 字符的宽度来计算的值。一个 ch 等于 "0" 字符的宽度。
ex：ex 单位用于相对于小写字母 "x" 的高度来计算的值。一个 ex 等于小写字母 "x" 的高度。
这些单位使得网页设计更加灵活，可以根据不同的布局和需求进行调整，并且有助于创建响应式的设计。