CSS Unità (Unità)

Le unità vengono utilizzate per specificare valori di lunghezza non zero negli attributi CSS, le unità CSS più comuni sono: px, em, pt, percentuale (%) ecc.

Comprendere le unità CSS

L'unità di misura della lunghezza può essere un'unità assoluta, ad esempio pixel, punti, ecc., o un'unità relativa, ad esempio percentuale (%) e unità em.

I valori non zero devono specificare l'unità CSS, poiché non c'è unità predefinita. La mancanza o l'omissione di un'unità viene considerata un errore. Tuttavia, se il valore è 0, l'unità può essere omessa (dopo tutto, zero pixel e zero pollici sono la stessa misura).

Unità di lunghezza relativa

L'unità di lunghezza relativa specifica la lunghezza rispetto a un'altra proprietà di lunghezza. Le unità relative sono:

L'unità em e ex dipendono dalla dimensione del carattere applicata all'elemento.

usare l'unità Em

La misura di 1em è uguale afont-sizeusa il valore calcolato dell'attributo dell'elemento utilizzato. Può essere utilizzato per misure verticali o orizzontali.

Ad esempio, se font-size imposta la dimensione dell'elemento a 16px eline-heightSe impostato a 2.5em, il valore calcolato in pixel per line-height è 2.5 x 16px = 40px.

p {
　　　　font-size: 16px;
　　　　line-height: 2.5em;
}

Si verifica un'anomalia quando si specifica em nel valore dell'attributo font-size, in questo caso, si fa riferimento alla dimensione del carattere dell'elemento genitore.

Quindi, quando specifichiamo la dimensione del carattere in em, 1em è uguale alla dimensione del carattere derivata. Pertanto, font-size: 1.2em; rende il testo 1.2 volte più grande rispetto al testo dell'elemento genitore.

body {
　　　　font-size: 62.5%;
　　　　font-family: Arial, Helvetica, sans-serif;
}
p {
　　　　font-size: 1.6em;
}
p: first-letter {
　　　　font-size: 3em;
　　　　font-weight: bold;
}

Facciamo una panoramica di tutto il significato di questo codice. In tutti i browser moderni, la dimensione predefinita del carattere è di 16px. Il nostro primo passo è quello di ridurre la dimensione dell'intero documento impostando font-size su 62.5%, il che ridurrà la dimensione del carattere a 10px (il 62.5% di 16px).

Questo è il valore predefinito di arrotondamentofont-sizeper facilitare la conversione da px a em.

Usare dispositivi di sicurezza

L'unità ex è uguale all'altezza x del carattere corrente.

Si chiama altezza x perché di solito è uguale all'altezza della lettera minuscola "x", come nel seguente esempio. Tuttavia, l'unità ex è definita anche per i caratteri che non contengono "x".

Unità di lunghezza assolute

Le unità di lunghezza assolute sono fisse le une rispetto alle altre. Dipendono fortemente dal mezzo di output, quindi sono particolarmente utili quando si conosce l'ambiente di output. Le unità assolute sono costituite da unità fisiche (in, cm, mm, pt, pc) e unità px.

Unità fisiche assolute, come in, cm, mm ecc., dovrebbero essere utilizzate per i supporti di stampa e dispositivi ad alta risoluzione simili. Per i display come computer desktop e dispositivi a bassa risoluzione, si consiglia di utilizzare unità pixel o em.

h1 { margin: 0.5in; } /* inches */
h2 { line-height: 3cm; } /* centimeters */
h3 { word-spacing: 4mm; } /* millimeters */
h4 { font-size: 12pt; } /* points */
h5 { font-size: 1pc; } /* picas */
h6 { font-size: 12px; } /* picas */