Corso di CSS - Tutorial 7: Dimensioni | height, width e max-width
🙏 Sostienimi con una donazione → https://www.paypal.com/paypalme/Franc...
🌍 Richiedi il prontuario attraverso il modulo contatti del mio sito → https://www.fantasticamenteing.com/
📽️ Video tutorial consigliati
Elementi block e inline in HTML → • HTML5 - Tutorial 10: Elementi block e...
Bordi → • Corso di CSS - Tutorial 4: Bordi | CS...
Margini → • Corso di CSS - Tutorial 5: Margini | ...
Padding → • Corso di CSS - Tutorial 6: Padding
💻 #CSS - #Tutorial 7: #Dimensioni ( height, width and wax-width )
In questo settimo tutorial del corso di CSS (in italiano) parleremo di dimensioni.
In CSS ci sono proprietà per impostare le dimensioni di un elemento:
🔹 width → Imposta la larghezza di un elemento
🔹 height → Imposta l’altezza di un elemento
🔹 max-width → Imposta la larghezza massima di un elemento
🔹 max-height → Imposta l’altezza massima di un elemento
🔹 min-width → Imposta la larghezza minima di un elemento
🔹 min-height → Imposta l’altezza minima di un elemento
🔷 Impostazione di altezza e larghezza
Le proprietà height e width vengono utilizzate per impostare l'altezza e la larghezza di un elemento.
Le proprietà height e width possono avere i seguenti valori:
• auto Questa è l'impostazione predefinita. Il browser calcola l'altezza e la larghezza
• length- Definisce l'altezza/larghezza in px, cm ecc.
• % - Definisce l'altezza/larghezza in percentuale del blocco contenitore
• initial - Imposta l'altezza/larghezza sul valore predefinito
• inherit - L'altezza/larghezza verrà ereditata dal suo valore padre.
▶ NB: ricorda che le proprietà width e height non includono padding, bordi o margini. Impostano l'altezza/larghezza dell'area del contenuto (quella circondata da padding, bordo e margine dell'elemento).
Il problema si verifica quando la finestra del browser è più piccola della larghezza dell'elemento. In questi casi, infatti, il browser aggiunge una barra di scorrimento orizzontale alla pagina.
Nel video vedremo come evitarlo!
🔷 Impostazione della larghezza massima
La proprietà max-width viene utilizzata per impostare la larghezza massima di un elemento.
Può assumere i seguenti valori:
• none - è di default. Indica che l’elemento non ha nessuna larghezza massima.
• lunghezza - definisce la larghezza massima in px, pt, cm, etc.
• % - definisce la larghezza massima in % rispetto al blocco contenitore
• initial – imposta questa proprietà sul valore predefinito
• inherit – eredita questa proprietà dal suo elemento genitore
Buona visione
💼 Ing. Francesca Martorana