CSS 中经常使用值。有时以绝对单位指定,有时以相对单位指定。
CSS 提供长度、角度、频率的值,并且每个 CSS 内都支持不同测量单位之间的转换。
了解 CSS 支持的各种单位或度量,让 Web 开发人员和设计人员能够在他们舒适的思维空间内工作。
下面是 CSS 支持的单位列表。
立即学习“前端免费学习笔记(深入)”;
cm、mm、Q、in、pt、pc、px
Unit | Name | Equivalent to |
---|---|---|
cm | Centimeters | 1cm = 37.8px = 1/2.54 of 1in |
mm | Millimeters | 1mm = 1/10 of 1cm |
Q | Quarter-millimeters | 1Q = 1/40 of 1cm |
in | Inches | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/6 of 1in |
pt | Points | 1pt = 1/72 of 1in |
px | Pixels | 1px = 1/96 of 1in |
度、度、弧度、转
Unit | Name | Equivalent to |
---|---|---|
deg | Degree | 360deg = 1 full circle |
grad | Gradian | 400grad = 1 full circle |
rad | Radian | 6.2832rad = 1 full circle (π approx = 3.1416) |
turn | Turn | 1 turn = 1 full cirle |
小,女士
unit | name | equivalent to |
---|---|---|
s | second | 1s = 1000ms |
ms | millisecond | 1ms = 1/1000 of 1s |
赫兹、千赫兹
unit | name | equivalent to |
---|---|---|
Hz | Hertz | 1Hz = 1/1000 of 1 kHz |
kHz | Kilo Hertz | 1KHz = 1000Hz |
dpi、dpcm、dppx
顾名思义,这些单位提供的这些值是相对于其他一些值的。它可能与某些父元素或视口有关。
em、ex、ch、rem
%、vw、vh、vmin、vmax
cqw、cqh、cqi、cqb、cqmin、cqmax
注意 通常的做法是为容器元素定义绝对值,然后对所有后代元素使用相对值。