插件窝 干货文章 CSS 中值的单位

CSS 中值的单位

td tr 单位 table 518    来源:    2024-10-20

CSS 中的单位

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

注意 通常的做法是为容器元素定义绝对值,然后对所有后代元素使用相对值。