Units for Values in CSS

Units in CSS

Values are regularly used in CSS. The are specified sometimes in absolute units and in other times in relative units.

CSS provides values for length, angle, frequency and within each CSS supports conversion between the different units of measurement.

An understanding of the various units or measurement that CSS supports to allow web developers and designers to work within their comfortable thought space.

Below is a list of units supported in CSS.

Absolute Units

Length

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

Angles

deg, grad, rad, turn

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

Time

s, ms

unit	name	equivalent to
s	second	1s = 1000ms
ms	millisecond	1ms = 1/1000 of 1s

Frequency Units

Hz, kHz

unit	name	equivalent to
Hz	Hertz	1Hz = 1/1000 of 1 kHz
kHz	Kilo Hertz	1KHz = 1000Hz

Resolution Units

dpi, dpcm, dppx

Relative Units

As the name suggests, these values provided with these units are relative to some other value. It could be related to some parent element or the viewport.

Font Related

em, ex, ch, rem

Viewport Related

%, vw, vh, vmin, vmax

Container Query Related

cqw, cqh, cqi, cqb, cqmin, cqmax

Note

It is common practice to define an absolute value to the container element and then use relative values for all descendant elements.

The above is the detailed content of Units for Values in CSS. For more information, please follow other related articles on the PHP Chinese website!