You don't know the CSS units

Most of the property values in CSS have corresponding quantifier units, which are commonly described as the size of the box model width, height, margin, padding, border , and some values of the attributes in the CSS3, for example transform . The following map basically includes all the units, the following will detail their definition and how to use.
?

One, the length unit 1, the relative font length unit

Unit	Description
Em	The font size relative to the current element (note that the current element font size may be inherited from the parent element)
Rem	Relative to root element font size (general root element is html element)
Ch	Relative to the width of the character 0 in the currently used font, changing font-family its size will change
Ex	Changes the size of the character x relative to the current font font-family

2. Relative viewport percentage length unit

Unit	Description
vw	1VW equals 1% of the initial inclusive block (viewport) width
Vh	1VW equals 1% of the initial containing block (viewport) height
Vmin	1vmin equals 1% of the lesser of VW and VH
Vmax	1vmax equals 1% of the larger of VW and VH

Supplemental Note: Percent, percent is special, it is not in essence a CSS length unit, its value is relative to the parent element's percentage of the same property.

3. Absolute length Unit

Unit	Description	cm	mm	inch	PC	PT	px
Cm	Centimeter	1cm	10mm
Mm	Millimeter	1/10cm	1mm
Q	Quarter-millimeters	1/40cm	1/4mm
Inch	Inch	2.54cm	25.4mm	1in	6pc	72pt	96px
Pc	Pica			1/6in	1pc	12pt	16px
Pt	Point			1/72in	1/12pc	1pt	4/3px
Px	Pixel			1/96in	1/16pc	3/4pt	1px

The length of the unit is the most widely used, there is not much to introduce.

Length unit use occasions recommended:

Media Type	Recommended	Occasional Use	very little use	Not recommended
Screen	EM, REM,%	Px	CH, ex, VW, VH, Vmin, Vmax	CM, Mm,q,in, PT, PC
Print	EM, REM,%	CM, Mm,q,in, PT, PC	CH, ex	PX, VW, VH, Vmin, Vmax

Second, other units 1, angle units

Unit	Description
Deg	Degrees (degrees), lap 360deg
Grad	Gradians, one lap 400grad
Rad	Radians (Radian System), one lap 2π
Turn	Turn, a lap of 1turn,90° for 0.25turn

Use occasions

div{    width: 300px;    height: 200px;    background: linear-gradient(180deg, red, blue); /* 标准的语法 */    transform: rotate(30deg) skew(30deg,20deg);}

2. Time Unit

Unit	Description
S	Seconds
Ms	Milliseconds

div{    transition: width 2s, height 2s, transform 2s;    /* transition-property: width;    transition-duration: 1s;    transition-timing-function: linear;    transition-delay: 2s; */}div{    animation-name: myfirst;    animation-duration: 5s;    animation-timing-function: linear;    animation-delay: 2s;    animation-iteration-count: infinite;    animation-direction: alternate;    animation-play-state: running;}

3. Frequency unit

Unit	Description
Hz	Number of occurrences per second
KHz	1000Hz

Use occasions
Frequency values are used in the listen (or say) attribute, there are two unit values, and Hertz and khz, most browsers do not support this type of attribute

strong {    voice-pitch: 1kHz;}

4. Resolution Units

Unit	Description
Dpi	Number of pixel points per inch included in device
Dpcm	Number of pixel points per centimeter
Dppx	Each logical pixel point (CSS pixel) contains the number of pixel points of the device, which is actually the device pixel ratio

Use occasions
Set different styles based on device pixel ratio

@media (min-resolution: 2dppx) {     ...}

Resources
Official documents
The lengths of CSS
CSS Units Best Practices

You don't know the CSS units