In questa lezione affronteremo i seguenti argomenti:
• Comprendere il concetto di Box Model in CSS.
• Imparare a posizionare elementi utilizzando le proprietà relative, absolute e fixed.
• Gestire i margini e i padding per controllare lo spazio intorno agli elementi.
Box Model
Il Box Model è un concetto fondamentale in CSS che descrive come ogni elemento HTML è rappresentato come un rettangolo, composto da contenuto, padding, bordo e margine.
Le proprietà principali sono:
- width e height: definiscono le dimensioni del contenuto.
- padding: spazio tra il contenuto e il bordo.
- border: il confine intorno al padding.
- margin: spazio esterno al bordo.
.box {
width: 200px;
height: 150px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}
Posizionamento Relativo e Assoluto
- position: relative;: Posiziona l'elemento in base alla sua posizione originale, consentendo di spostarlo utilizzando top, right, bottom e left.
- position: absolute;: Posiziona l'elemento rispetto al suo primo genitore con posizione diversa da static.
.relative-box {
position: relative;
top: 10px;
}
.absolute-box {
position: absolute;
top: 20px;
left: 30px;
}
Posizionamento Fisso e Margini/Padding
- position: fixed;: Posiziona l'elemento rispetto alla finestra del browser, mantenendolo fisso durante lo scroll.
- gestione dei margini e dei padding per il layout.
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
}
Attività Pratica
- Creare un layout utilizzando il Box Model con almeno tre elementi diversi.
- Posizionare gli elementi relativamente, assolutamente e/o in modo fisso.
- Utilizzare margini e padding per regolare gli spazi tra gli elementi.