Proprietà di larghezza in CSS spiegata
Questa guida descrittiva fornisce il funzionamento e l'utilizzo della proprietà di larghezza in CSS. Il funzionamento della proprietà di larghezza è guidato dalla sintassi utilizzata e diversi esempi sono citati per illustrare l'uso della proprietà di larghezza.
Come funziona la proprietà di larghezza in CSS
La larghezza di un elemento può essere impostata utilizzando la sintassi scritta di seguito.
selettore larghezza: valore;Il selettore può essere qualsiasi elemento o può fare riferimento alla classe CSS nel foglio di styling. Il valore della larghezza può essere impostato in varie unità di misurazione indicate di seguito:
- Lunghezza: il valore è definito in PX, EM. Il valore di EM varia in base alla dimensione predefinita impostata per l'elemento genitore. Ad esempio, se la dimensione predefinita è impostata su 15px, verrebbe conteggiata come 1EM e mantenendo il valore predefinito a 15px, il valore delle dimensioni 2em sarebbe equivalente a 30px.
- Auto: i browser regolano automaticamente il valore
- percentuale ( %): il valore (in %) si associa alla larghezza dell'elemento genitore. Ad esempio, il valore del 50% regolerebbe la larghezza al 50% (dell'elemento genitore o in cui è contenuto l'elemento mirato).
- Eredità: il valore della larghezza dell'elemento genitore è recuperato
- iniziale: viene utilizzato il valore di larghezza predefinito
Il funzionamento della proprietà di larghezza in CSS dipende principalmente dall'unità di misurazione utilizzata.
Come utilizzare la proprietà di larghezza in CSS
Questa sezione fornisce diversi esempi che dimostrano la funzionalità della proprietà di larghezza in CSS.
Esempio 1: utilizzando la proprietà di larghezza con lunghezza/percentuale
Questo esempio spiega l'uso della proprietà di larghezza con varie misure di lunghezza e percentuale. Il codice presentato di seguito si riferisce a questo esempio:
Regolare la larghezza
Larghezza in px
Larghezza in em
Larghezza in %
La descrizione del codice è fornita di seguito:
- Vengono create tre classi CSS denominate "PX", "EM" e "Per"
- Il "PX", "EM" e "Per" utilizzano rispettivamente PX, EM e % per la misurazione della larghezza
- Queste tre classi sono usate in tre paragrafi per dimostrare il loro utilizzo
L'immagine del codice è fornita di seguito
Produzione:
Esempio 2: Utilizzo della larghezza con valori iniziali, ereditari e automatici
I valori iniziali, ereditari e automatici vengono utilizzati in questo esempio per alterare la larghezza dell'elemento. Per fare ciò, viene esercitato il seguente codice:
Regolazione della larghezza con valori automatici/iniziali/ereditari
larghezza iniziale
larghezza ereditaria
larghezza automatica
Il codice è descritto come
- Tre classi CSS sono fatte denominate "iniziale", "eredità" e "auto"
- Queste classi sono utilizzate in tre paragrafi che rappresentano i valori "iniziale", "eredità" e "auto" di larghezza
- Un div è disegnato con larghezza del 50% e il colore di fondo che verrebbe usato come genitore per un paragrafo (che viene utilizzato con la classe CSS ereditaria)
L'immagine del codice è mostrata di seguito
Produzione:
Dall'output, si osserva che la larghezza del secondo paragrafo è ereditata dal Div (la cui larghezza è del 50%) e quindi il paragrafo sarebbe limitato al 50% del suo elemento genitore (Div).
Esempio 3: Utilizzo della larghezza con larghezza massima e larghezza minima
La larghezza massima e la larghezza minima definiscono rispettivamente il limite di larghezza superiore e inferiore. Se la proprietà di larghezza viene utilizzata con larghezza minima/larghezza massima, allora ci sono possibilità che il risultato potrebbe non essere lo stesso per il tuo requisito. Il valore della larghezza è possibile essere compromesso in una delle seguenti condizioni:
- se larghezza < max-width then value of max-width will be used and
- se larghezza < min-width then the width would be set according to the min-width value
Pratichiamolo usando il codice scritto di seguito.
Usando la larghezza con larghezza minim e larghezza massima
larghezza con larghezza min
larghezza con larghezza massima
La descrizione del codice è fornita di seguito
- Vengono create due classi CSS denominate "Min" e "Max" che utilizza la larghezza con larghezza Min e larghezza con larghezza massima
- I valori della larghezza nelle classi "min" e "max" sono rispettivamente del 25% e del 75%, mentre la larghezza minima è del 75% e la larghezza massima è del 50%
- Queste classi CSS sono utilizzate in due paragrafi
L'immagine dell'editore di codice è mostrata di seguito:
Produzione:
Dall'output di cui sopra, la larghezza è influenzata dalla larghezza minima e dalla larghezza massima. Pertanto, si suggerisce che la larghezza deve essere utilizzata separatamente, altrimenti la proprietà può comportare un output strano.
Conclusione
La proprietà di larghezza in CSS viene utilizzata per regolare la larghezza (lunghezza orizzontale) dell'elemento. Fa connessione con l'imbottitura, il bordo e i margini di un elemento. Tuttavia, né larghezza né imbottitura/margine/bordo a vicenda. Questo articolo fornisce il funzionamento e l'utilizzo della proprietà di larghezza in CSS. La proprietà di larghezza può essere influenzata dalla proprietà massima e altezza minima di CSS. Quindi, si consiglia di utilizzare la proprietà di larghezza mantenendo la larghezza massima e la larghezza minima. Inoltre, abbiamo dimostrato esempi che utilizzano la proprietà di larghezza e larghezza massima/minima in CSS.