La proprietà in altezza in CSS ha spiegato
Poiché l'altezza è una delle azioni più vicine all'imbottitura, al bordo e ai margini. Tuttavia, né li influenza né ottiene effetto da loro. Questa guida descrittiva fornisce il funzionamento e l'utilizzo della proprietà di altezza in CSS con i seguenti risultati di apprendimento:
- funzionante della proprietà di altezza in CSS
- Utilizzo della proprietà di altezza in CSS
- La differenza tra altezza e altezza massima/minista
Come funziona la proprietà di altezza in CSS
L'opera di proprietà in altezza in CSS dipende dalla sintassi fornita di seguito:
selettore altezza: valore;Il selettore può essere qualsiasi elemento o può fare riferimento alla classe CSS nel foglio di styling. Il valore dell'altezza può essere impostato in varie unità di misurazione indicate di seguito;
Lunghezza: la lunghezza (lunghezza verticale) può essere definita in unità come PX, EM ecc. Il PX è il valore statico mentre l'EM varia in base al valore predefinito dell'elemento genitore. Come se l'altezza del corpo fosse impostata su 20px (come altezza predefinita), sarebbe equivalente a 1EM.
Auto: questo valore regola l'altezza in base all'impostazione predefinita del browser
percentuale (%): la percentuale dell'elemento principale è presa come riferimento. Ad esempio, il valore del 50% regolerebbe l'altezza al 50% (secondo l'altezza dell'elemento genitore.)
Inizialmente: questo utilizza il valore di altezza predefinito
Eredità: questo valore prende l'altezza dall'elemento genitore
Il funzionamento della proprietà di altezza in CSS dipende principalmente dall'unità di misurazione utilizzata.
Come utilizzare la proprietà di altezza in CSS
Questa sezione fornisce diversi esempi che dimostrano la funzionalità della proprietà di altezza in CSS.
Esempio 1: usando la lunghezza/percentuale di proprietà di altezza
Questo esempio utilizza il valore di lunghezza con varie unità di misurazione e il seguente codice viene praticato al riguardo.
Regolazione dell'altezza (usando la lunghezza e la percentuale)
L'altezza è in px
L'altezza è percentuale (%)
Altezza in em
La descrizione del codice è fornita di seguito:
- hanno creato tre classi CC chiamate "Prim", "Sec" e "Ter"
- La classe "Prim" considera l'altezza in "PX", mentre le classi "SEC" e "TER" fanno uso di "%" e "em" per la lunghezza di altezza (verticale)
- Le tre classi CSS sono utilizzate in tre paragrafi (creati nel corpo)
L'immagine del codice sopra è mostrata di seguito,
Produzione:
Esempio 2: utilizzando i valori automatici, eredità e iniziali della proprietà di altezza
Questo esempio pratica i valori automatici, ereditati e iniziali della proprietà di altezza in CSS. Per fare ciò, il codice fornito di seguito è praticato
Regolare l'altezza
L'altezza è impostata sul valore iniziale
L'altezza viene ereditata
Altezza in auto
La descrizione del codice è indicata di seguito:
- Viene creato un elemento CSS per "Div" (in quanto verrebbe usato come elemento genitore)
- Vengono utilizzate tre classi CSS "Ini", "Inh" e "Aut" che verrebbero utilizzate per i valori di altezza (iniziale, eredità e auto)
- Un paragrafo utilizza la classe "Ini" mentre il paragrafo che utilizza la classe "INH" è contenuto all'interno di un div e il terzo paragrafo utilizza la classe CSS "AUT"
L'immagine del codice sopra viene visualizzata di seguito
Produzione:
Esempio 3: Utilizzo dell'altezza con altezza massima e minimo
Differenziamo il funzionamento della proprietà di altezza dalle proprietà massime-alhi/min-height utilizzando il codice scritto di seguito.
Regolare l'altezza
Altezza con massimo
Altezza con minimo
La descrizione del codice è
- Vengono create due classi CSS denominate "HX" e "HN"
- La classe "HX" contiene le proprietà "Altezza" e "Max-Height"
- La classe "HN" considera proprietà "min-height" e "altezza"
- La classe "HX" è associata al primo paragrafo mentre la classe "HN" viene utilizzata nel secondo paragrafo.
L'immagine del codice è fornita di seguito
Produzione:
Dall'output si osserva che la proprietà massima altezza ha dominato la proprietà di altezza e la proprietà minima di altezza ha dominato la proprietà di altezza.
Attraversando gli esempi, abbiamo fornito la funzionalità di altezza-proprietà e abbiamo anche descritto il suo comportamento utilizzandolo con proprietà massime/ministe.
Conclusione
La proprietà di altezza in CSS regola l'altezza (lunghezza verticale) dell'elemento. Questo articolo fornisce il lavoro e l'utilizzo della proprietà di altezza in CSS. La proprietà in altezza non è effettuata da bordo/margine/imbottitura, ma può essere influenzata dalla proprietà massima altezza e minima altezza di CSS. Abbiamo fornito pochi esempi che usano l'altezza con minimo-altezza/massima, e si è concluso che la proprietà di altezza deve essere usata da sola (non con massimo altezza/min-hireight).