Unidades de longitud en CSS
En CSS, las unidades de longitud se usan para definir la dimensión de un elemento HTML. Estas unidades pueden tener valores fijos, así como valores dinámicos para una interfaz receptiva. Debido a esto, se clasifican en dos clases Absoluto y pariente. El absoluto La clase contiene aquellas unidades que ofrecen valores fijos mientras que el relativo La clase tiene unidades que cambian sus valores según su padre o elemento raíz.
Las unidades de longitud se utilizan principalmente para establecer el ancho, la altura, el acolchado, el margen, el borde, el tamaño de la fuente y mucho más. Teniendo en cuenta la importancia, esta guía proporciona una visión general de las unidades de longitud en CSS con los siguientes resultados de aprendizaje.
- Lista de unidades de longitud en clase absoluta
- Lista de unidades de longitud en la clase relativa
- Uso de unidades de longitud absoluta y unidades de longitud relativa
Unidades de longitud de CSS
Esta sección alista las unidades de longitud en su categoría respectiva. Las unidades de longitud se clasifican ampliamente en dos categorías, Absoluto y pariente. Exploremos las unidades que caen en estas categorías y su uso.
Cómo usar unidades de longitud absoluta
Esta categoría contiene esas unidades de longitud que tienen Valor fijo En todo el documento. En situaciones en las que se requiere el tamaño fijo de un elemento, estas unidades sirven mejor al propósito. Sin embargo, las unidades de longitud absoluta no son adecuadas para diseños receptivos. La siguiente tabla proporciona la lista y la descripción de las unidades de longitud absoluta.
| Unidad | Símbolo | Relación |
|---|---|---|
| Pulgada | en | 1in = 1in o 1in = 96px |
| Centímetro | cm | 1in = 2.5 cm o 1 cm = 38px |
| Milímetro | mm | 1in = 25 mm o 1 mm = 3.84px |
| Picas | ordenador personal | 1in = 6pc o 1pc = 16px |
| Puntos | PT | 1in = 72pt o 1pt = 1.13px |
| Píxeles | px | 1in = 96px o 1px = 1px |
En la tabla anterior, la unidad más grande es "Pulchas (in)" mientras que la unidad más pequeña es "Píxeles (PX)". Entre estos, el px la unidad se practica más.
Ejemplo: Uso de unidades de longitud absoluta
El siguiente código muestra el uso de en, PX, PT y MM Unidades de longitud.
Html
Ancho y altura en píxeles (PX)
Ancho y altura en puntos (PT)
Ancho y altura en milímetro (mm)
En el código anterior, tres párrafos están encerrados en un elemento único (sirve como elemento principal)
CSS
De la CSS anterior, el ancho y la altura del divir de elemento está en pulgadas mientras PX, PT y MM se usan como unidades de longitud en los párrafos.
Producción
De la salida, se observa que los elementos infantiles (párrafos) no están influenciados por su elemento principal ().
Cómo usar unidades de longitud relativa
Las unidades de longitud relativa manipulan dinámicamente el tamaño del elemento con respecto a su elemento principal o raíz. La siguiente lista se refiere a las unidades de longitud relativa de CSS.
| Unidad | Símbolo | Descripción |
|---|---|---|
| Porcentaje | De % | El porcentaje relativo del elemento principal |
| Efímero | Em | Se refiere al tamaño de fuente del elemento principal |
| Efímero | movimiento rápido del ojo | Se refiere al tamaño de fuente del elemento raíz |
| Ancho de la visión | VW | En relación con el ancho de ventana del navegador |
| Altura de la ventana de la ventana | VH | En relación con el navegador-window-aguja |
| Personaje | pez | En relación con el ancho del personaje "0" |
| Ex unidad | ex | En relación con la altura de "x (caso inferior)" |
| Mínimo | vmin | El Vmin se refiere a la altura o ancho mínimo de la ventana del navegador |
| El máximo | vmax | El Vmax se relaciona con la altura/ancho máximo de la ventana del navegador |
Nota: En caso de que si no hay elemento principal, las unidades se ajustan de acuerdo con el elemento raíz ().
Ejemplo: Uso de unidades de longitud relativa
Este ejemplo proporciona el uso de varias unidades de longitud relativa.
Html
Ancho y altura en porcentaje según el elemento principal
Ancho y altura en EM (según el padre)
Ancho y altura en REM (según la raíz)
En el código anterior, se crean tres párrafos y se contienen en un Elemento principal (div). Estos párrafos usan varias unidades de longitud relativa (porcentaje, EM y REM) para establecer el ancho y la altura.
CSS
En el código CSS anterior, se define el ancho, la altura, el color de fondo y el borde del elemento principal. El .por , .em, y .Las clases REM definen la altura/ancho en porcentaje (%), efímero (EM) y la raíz efímera (REM).
Nota: Como el tamaño de fuente predeterminado de Div es 16px, por lo tanto 1em = 16px y 1Rem = 16px. El movimiento rápido del ojo establece el tamaño de acuerdo con el elemento raíz (cuerpo) mientras que el Em Establecería el valor de acuerdo con el elemento principal (DIV).
Producción
Desde la salida, se observa que el porcentaje y unidades EM ajustar el ancho/altura de acuerdo con el elemento principal (div) mientras que el movimiento rápido del ojo la unidad establece el ancho/altura con respecto al elemento raíz (cuerpo).
Conclusión
En CSS, las unidades de longitud se clasifican en dos categorías más amplias: unidades de longitud absoluta y unidades de longitud relativa. Las unidades de longitud absoluta tienen valores fijos, mientras que las unidades relativas cambian sus valores de acuerdo con su elemento matriz o raíz. Las unidades de longitud absoluta son PX, PT, PC, IN, CM y MM, y las unidades %, EM, REM, VW, VHM Vmin, VMAX, y ex caen bajo unidades relativas. Para una mejor comprensión, hemos demostrado el uso de estas unidades con la ayuda de ejemplos.