in

Unidades CSS


Unidades CSS

CSS tiene varias unidades diferentes para expresar una longitud.

Muchas propiedades CSS toman valores de «longitud», como width, margin, padding,
font-sizeetc.

Largo es un número seguido de una unidad de longitud, como 10px,
2emetc.

Ejemplo

Establezca diferentes valores de longitud, usando px (píxeles):

h1 {
tamaño de fuente: 60px;
}

pag {
tamaño de fuente: 25px;

altura de línea: 50px;
}

Inténtalo tú mismo «

Nota: No puede aparecer un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es
0, la unidad se puede omitir.

Para algunas propiedades de CSS, se permiten longitudes negativas.

Hay dos tipos de unidades de longitud: absoluto y relativo.


Longitudes absolutas

Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de estas aparecerá exactamente como ese tamaño.

No se recomienda el uso de unidades de longitud absoluta en la pantalla, porque los tamaños de pantalla varían mucho. Sin embargo, se pueden utilizar si se conoce el medio de salida, como para el diseño de impresión.

Unidad Descripción
cm centímetros Pruébalo
mm milímetros Pruébelo
en pulgadas (1 pulgada = 96 px = 2,54 cm) Pruébelo
px * píxeles (1 px = 1/96 de 1 pulgada) Pruébelo
pt puntos (1 punto = 1/72 de 1 pulg.) Pruébelo
ordenador personal picas (1pc = 12 pt) Pruébelo

* Los píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de bajo ppp, 1 px es un píxel (punto) del dispositivo de la pantalla. Para impresoras y pantallas de alta resolución, 1 px implica varios píxeles del dispositivo.


Longitudes relativas

Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa se escalan mejor entre diferentes medios de renderizado.

Unidad Descripción
em Relativo al tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual) Intentalo
ex Relativo a la altura x de la fuente actual (rara vez se usa) Intentalo
ch Relativo al ancho del «0» (cero) Intentalo
movimiento rápido del ojo Relativo al tamaño de fuente del elemento raíz Intentalo
vw Relativo al 1% del ancho de la ventana gráfica * Intentalo
vh Relativo al 1% de la altura de la ventana gráfica * Intentalo
vmin Relativo al 1% de la dimensión más pequeña de la ventana gráfica * Intentalo
vmax Relativo al 1% de la dimensión más grande de la ventana gráfica * Intentalo
% Relativo al elemento padre Intentalo

Propina: ¡Las unidades em y rem son prácticas para crear un diseño perfectamente escalable!
* Viewport = el tamaño de la ventana del navegador. Si la ventana tiene 50 cm de ancho, 1 vw = 0,5 cm.



Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la unidad de longitud.

Unidad de longitud
em, ex,%, px, cm, mm, in, pt, pc 1.0 3,0 1.0 1.0 3,5
ch 27,0 9.0 1.0 7.0 20,0
movimiento rápido del ojo 4.0 9.0 3.6 4.1 11,6
vh, vw 20,0 9.0 19,0 6.0 20,0
vmin 20,0 12,0 19,0 6.0 20,0
vmax 26,0 16,0 19,0 7.0 20,0

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gestión de base de datos

script parameters1

Parámetros del script de shell – javatpoint