CSS单位

绝对单位

绝对单位是固定的,不受环境因素(如父元素、视口大小)的影响。它们在不同的浏览器和设备上总是相同的。

单位 释义 描述
px 像素 最常用的绝对单位之一
1px 等于一个设备像素,适用于精确控制尺寸
pt 通常用于印刷领域
1pt 等于 1/72 英寸(约 0.353 mm)
pc 百分 1pc = 12pt
in 英寸 1in = 2.54cm
cm 厘米 1cm = 10mm
mm 毫米 1mm = 0.1cm

相对单位

相对单位的值是相对的,它们依赖于某些参考值,如父元素的大小、视口的大小、根元素的字体大小等。

这些单位通常用于响应式设计,因为它们可以根据环境条件自动调整。

单位 释义 描述
em 当对于当前父元素的字体大小
如果当前父元素的字体大小是 16px,那么 1em = 16px
rem root em 相对于根元素(通常是 html)的字体大小
在 root 元素的字体大小为 16px 的情况下,1 rem = 16px
% 百分比 相对于父元素的大小
常用于宽度、高度、边距和填充等属性
vw 视口宽度 相对于视口宽度的 1%
100vw 等于视口的宽度
vh 视口高度 相对于视口高度的 1%
100vh 等于视口的高度
vmin 视口最小值 相对于视口宽度和高度中较小的那个值的 1%
vmax 视口最大值 相对于视口宽度和高度中较大的那个值的 1%
ex 相对于当前元素的字体*高度
通常用于字体的高度相关属性
ch 相对于当前字体的 0 字符的宽度
通常用于设置字符基准的宽度