Unidades relativas

Las unidades relativas especifican el valor de la longitud relativo al valor de otra longitud. Las hojas de estilo que utilizan unidades relativas pueden ser redimensionadas fácilmente.
UnidadEjemploDescripción
%p {
font-size:16px;
line-height:150%;
}		El valor de una propiedad expresado en porcentajes.
Relativo a otro valor, normalmente un valor heredado del elemento padre.
Utilizados para unidades de longitud, ángulos, tiempo, números, frecuencia.
emspan {
display:inline-block;
width:5em;
}		Representa el tamaño de una letra "M" de la fuente del elemento.
exspan {
display:inline-block;
width:5ex;
}		Representa la altura de una letra "x" de la fuente del elemento.
chspan {
display:inline-block;
width:5ch;
}		Representa el tamaño de "0" (ZERO, U+0030) de la fuente del elemento.
remh1 {
font-size:2rem;
}		Representa el tamaño de fuente del elemento raiz. ( En el HTML el tamaño de fuente del elemento <html> )
vwdiv {
width:50vw;
}		Represemta el 1% de la anchura del viewport
vhdiv {
height:50vh;
}		Represemta el 1% de la altura del viewport
vmindiv {
width:50vmin;
}		Representa el menor entre vw y vh
vmaxdiv {
width:50vmax;
}		Representa el mayor entre vw y vh

Unidades absolutas

Las unidades absolutas son fijas en relación con otras. Estas medidas son dadas en unidades físicas conocidas como centímetros, milímetros pulgadas, o pixeles , y pueden ser muy útiles en diseños de página con dimensiones fijas.
UnidadEjemploDescripción
cmh2{line-height:3cm;}1 cm = 96 px/2.54
1 cm = 37.79528 px
mmh3{word-spacing:4mm;}1mm = 1/10 cm
1 mm = 3.779528 px
Qh3{letter-spacing:1Q;}un cuarto de milímetro
1 Q = 1/40 cm
1 Q = 0.94 px
inh1{margin: 0.5in;}1 pulgada = 2.54cm
1 pulgada = 96px o
1 pulgada = 72pt
pch4{font-size:1pc;}El cícero o pica es una unidad de medida tipográfica de aproximativamente 1/6 pulgadas
1 pc = 16 px
pth4{font-size:12pt;}1pt = 1/72 in
1 pt = 1.333333 px
pxp { font-size: 12px }Píxeles

Unidades para ángulos

Utilizadas para crear gradientes o para trasformaciones CSS (rotate).
UnidadEjemploDescripción
deg.giro{transform: rotate(-90deg);}Grado sexagesimal. Hay 360 grados en un circulo completo.
grad.giro{transform: rotate(-100grad);}Grado centesimal o gon, también llamado gradián. Hay 400 gradianes en un circulo completo.
rad.giro{transform: rotate(-1.57rad);}Radián. Hay 2*Math.PI radianes en un circulo completo.
turn.giro{transform: rotate(-.25turn);}Un giro completo de 360deg

Unidades de tiempo

En CSS el tiempo se expresa en segundos ( s ) o milisegundos ( ms ), y es utilizado para crear animaciones y transiciones.
UnidadEjemploDescripción
sdiv {
transition-duration: .5s;
}		Segundo
msdiv {
transition-duration: 500ms;
}		Milisegundo. Hay 1000 milisegundos en un segundo