Unità di lunghezza in CSS
In CSS, le unità di lunghezza vengono utilizzate per definire la dimensione di un elemento HTML. Queste unità possono avere valori fissi e valori dinamici per un'interfaccia reattiva. Per questo motivo, sono classificati in due classi assoluto e relativo. IL assoluto la classe contiene quelle unità che offrono valori fissi mentre il parente La classe ha unità che cambiano i loro valori in base al loro genitore o all'elemento radice.
Le unità di lunghezza sono utilizzate principalmente per impostare la larghezza, l'altezza, l'imbottitura, il margine, il bordo, le dimensioni dei caratteri e molto altro ancora. Tenendo conto dell'importanza, questa guida fornisce una panoramica delle unità di lunghezza in CSS con i seguenti risultati di apprendimento.
- Elenco di unità di lunghezza in classe assoluta
- Elenco di unità di lunghezza nella classe relativa
- Utilizzo di unità di lunghezza assoluta e unità di lunghezza relativa
Unità di lunghezza CSS
Questa sezione arruola le unità di lunghezza nella rispettiva categoria. Le unità di lunghezza sono ampiamente classificate in due categorie, Assoluto e relativo. Esploriamo le unità che rientrano in queste categorie e il loro utilizzo.
Come utilizzare le unità di lunghezza assoluta
Questa categoria contiene quelle unità di lunghezza che hanno valore fisso Nell'intero documento. In situazioni in cui è richiesta la dimensione fissa di un elemento, queste unità hanno meglio lo scopo. Tuttavia, le unità di lunghezza assoluta non sono adatte a progetti reattivi. La tabella seguente fornisce l'elenco e la descrizione delle unità di lunghezza assoluta.
| Unità | Simbolo | Relazione |
|---|---|---|
| Pollice | In | 1in = 1in o 1in = 96px |
| Centimetro | cm | 1in = 2.5 cm o 1 cm = 38px |
| Millimetro | mm | 1in = 25mm o 1mm = 3.84px |
| Picas | PC | 1in = 6pc o 1pc = 16px |
| Punti | pt | 1in = 72pt o 1pt = 1.13px |
| Pixel | Px | 1in = 96px o 1px = 1px |
Nella tabella sopra, l'unità più grande è "Pollici (in)" mentre l'unità più piccola è "Pixel (PX)". Tra questi, il Px L'unità è praticata di più.
Esempio: usando unità di lunghezza assoluta
Il seguente codice mostra l'uso di in unità in, PX, PT e MM di lunghezza.
Html
Larghezza e altezza nei pixel (PX)
Larghezza e altezza in punti (PT)
Larghezza e altezza in millimetro (mm)
Nel codice sopra, tre paragrafi sono racchiusi in a elemento singolo (funge da elemento genitore)
CSS
Dai css sopra, la larghezza e l'altezza di div di elemento è in pollici mentre px, pt e mm sono usati come unità di lunghezza nei paragrafi.
Produzione
Dall'output, si osserva che gli elementi figlio (paragrafi) non sono influenzati dall'elemento genitore ().
Come utilizzare le unità di lunghezza relativa
Le unità di lunghezza relativa manipolano dinamicamente la dimensione dell'elemento rispetto al loro genitore o all'elemento radice. L'elenco seguente si riferisce alle unità di lunghezza relativa CSS.
| Unità | Simbolo | Descrizione |
|---|---|---|
| Percentuale | % | La percentuale relativa dell'elemento genitore |
| Effimero | Em | Si riferisce alla dimensione del carattere dell'elemento genitore |
| Radice effimera | REM | Si riferisce alla dimensione del carattere dell'elemento radicale |
| Larghezza della visualizzazione | VW | Relativo alla larghezza del browser-Window |
| Altezza del vista | VH | Relativo al browser-fin-Window-Height |
| Carattere | cap | Relativo alla larghezza del carattere "0" |
| Ex unità | ex | Relativo all'altezza di "x (minuscolo)" |
| Viewport's Minimo | vmin | Il VMIN si riferisce all'altezza minima o alla larghezza del browser-Window |
| Viewport's Massimo | vmax | Il VMAX si riferisce con la massima altezza/larghezza del browser-finestre |
Nota: Nel caso in cui, se non esiste un elemento genitore, le unità vengono regolate in base all'elemento radice ().
Esempio: usando le unità di lunghezza relativa
Questo esempio fornisce l'uso di varie unità di lunghezza relativa.
Html
Larghezza e altezza in percentuale secondo l'elemento genitore
Larghezza e altezza in EM (secondo il genitore)
Larghezza e altezza in rem (secondo la radice)
Nel codice sopra, vengono creati tre paragrafi e sono contenuti in a Elemento genitore (div). Questi paragrafi usano varie unità di lunghezza relativa (percentuale, em e rem) per impostare la larghezza e l'altezza.
CSS
Nel codice CSS sopra, è definita la larghezza, l'altezza, il colore di sfondo e il bordo dell'elemento genitore. IL .per , .em, e .Le classi REM definiscono l'altezza/larghezza in percentuale (%), effimero (EM) e radice effimera (REM).
Nota: Poiché la dimensione predefinita di DOV è 16px, quindi 1em = 16px e 1rem = 16px. IL REM imposta la dimensione in base all'elemento radice (corpo) mentre il Em imposterebbe il valore secondo l'elemento genitore (div).
Produzione
Dall'output, si osserva che il percentuale e unità EM regolare la larghezza/altezza secondo l'elemento genitore (div) mentre il REM L'unità imposta la larghezza/altezza rispetto all'elemento radice (corpo).
Conclusione
In CSS, le unità di lunghezza sono classificate in due categorie più ampie: unità di lunghezza assoluta e unità di lunghezza relativa. Le unità di lunghezza assoluta hanno valori fissi mentre le unità relative cambiano i loro valori in base al loro genitore o all'elemento radice. Le unità di lunghezza assoluta sono PX, PT, PC, IN, CM e MM e le unità %, EM, REM, VW, VHM VMIN, VMAX, ed ex cadono in unità relative. Per una migliore comprensione, abbiamo dimostrato l'uso di queste unità con l'aiuto di esempi.