Aprenda a trabajar con unidades en CSS
Una de las cosas que usarás a diario en CSS son las unidades . Se utilizan para establecer longitudes, rellenos, márgenes, alinear elementos, etc.
Cosas como px
, em
, rem
o porcentajes.
Están por todas partes. También hay algunos relativamente desconocidos.
Píxeles
La unidad de medida más utilizada. Un píxel no se correlaciona con un píxel físico en la pantalla, ya que esto varía mucho según el dispositivo (piense en dispositivos con alta resolución de PPP y dispositivos sin pantalla retina).
Existe una convención que hace que esta unidad funcione de manera consistente en todos los dispositivos.
Porcentajes
Otra medida muy útil, los porcentajes le permiten especificar valores en porcentajes de la propiedad correspondiente de ese elemento padre.
Ejemplo:
.parent { width: 400px;}.child { width: 50%; /* = 200px */}
Unidades de medida del mundo real
Contamos con unidades de medida que se traducen del mundo exterior. En su mayoría son inútiles en la pantalla, pero pueden resultar útiles para hojas de estilo impresas. Son:
cm
un centímetro (se asigna a 37,8 píxeles)mm
un milímetro (0,1 cm)q
un cuarto de milímetroin
una pulgada (se asigna a 96 píxeles)pt
un punto (1 pulgada = 72 puntos)pc
una pica (1 pica = 12 puntos)
Unidades relativas
em
es el valor asignado a ese elementofont-size
, por lo tanto su valor exacto cambia entre elementos. No cambia dependiendo de la fuente utilizada, solo del tamaño de la fuente. En tipografía mide el ancho de lam
letra.rem
es similar aem
, pero en lugar de variar el tamaño de fuente del elemento actual, utiliza elhtml
tamaño de fuente del elemento raíz ( ). Establece ese tamaño de fuente una vez yrem
será una medida consistente en toda la página.ex
es comoem
, pero insertado de medir el ancho dem
, mide la altura de lax
letra. Puede cambiar dependiendo de la fuente utilizada y del tamaño de la fuente.ch
es comoex
pero en lugar de medir la alturax
mide el ancho de0
(cero).
Unidades de ventana gráfica
vw
La unidad de ancho de la ventana gráfica representa un porcentaje del ancho de la ventana gráfica.50vw
significa el 50% del ancho de la ventana gráfica.vh
La unidad de altura de la ventana gráfica representa un porcentaje de la altura de la ventana gráfica.50vh
significa el 50% de la altura de la ventana gráfica.vmin
La unidad mínima de la ventana gráfica representa el mínimo entre la altura o el ancho en términos de porcentaje.30vmin
es el 30% del ancho o la altura actual, dependiendo de cuál sea menor.vmax
La unidad máxima de la ventana gráfica representa el máximo entre la altura o el ancho en términos de porcentaje.30vmax
es el 30% del ancho o la altura actual, dependiendo de cuál sea mayor.
Unidades de fracciones
fr
Son unidades de fracción y se utilizan en CSS Grid para dividir el espacio en fracciones. Solucion de crucigramas
Tips de CSS
Tal vez te puede interesar:
- Manejo de errores CSS
- Importar un archivo CSS usando @import
- Bordes CSS
- La propiedad flotante CSS y su limpieza
Unidades CSS
PíxelesPorcentajesUnidades de medida del mundo realUnidades relativasUnidades de ventana gráficaUnidades de fracciones
programar
es
https://aprendeprogramando.es/static/images/programar-unidades-css-2012-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente