A partire da questa lezione iniziamo a parlare delle proprietร CSS per lโattribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo. Il primo passo in tal senso lo faremo parlando di box model, cioรจ di quellโinsieme di regole che determinano lโaspetto degli elementi di tipo block.
Elementi blocco e in linea
Iniziamo col dire che gli elementi della pagina possono essere distinti in due grandi famiglie:
- Elementi block-level โ Si tratta di elementi normalmente utilizzati come contenitori in quanto, per loro natura, sono idonei a contenere altri elementi di tipo blocco o inline. Un tipico elemento di questa famiglia รจ il <div>. Una caratteristica tipica di questi elementi รจ che gli si possono assegnare dimensioni esplicite; in mancanza di dimensioni predefinite, tali elementi occuperanno tutta la larghezza disponibile (la larghezza del loro contenitore) e tutta lโaltezza resa necessaria da ciรฒ che contengono.
- Elementi inline โ Si tratta di elementi che, per loro natura, sono idonei a contenere altri elementi inline ma non di tipo block (uno <span>, ad esempio, puรฒ contenere uno <strong> ma non un <div>!). Questi elementi non possono avere dimensioni esplicite in quanto il loro ingombro sarร determinato solo dal loro contenuto.
Da un punto di vista pratico possiamo notare che mentre gli elementi di tipo block producono un ritorno a capo, quelli di tipo inline no: questo significa che, salvo stilizzazioni ad hoc, gli elementi block possono essere impilati uno sotto allโaltro, mentre quelli in linea si affiancano.
Unโaltra osservazione importante riguarda lโutilizzo di questi elementi: a causa della loro natura, gli elementi block sono utilizzati per definire la struttura del sito, mentre gli elementi inline riguardano il contenuto.
Il box model
Abbiamo giร detto che col temine "box model" si fa sinteticamente riferimento a quellโinsieme di regole che servono per definire la presentazione dei box. Per meglio comprendere questo concetto (molto importante) si faccia riferimento a questa immagine:
Quella che รจ rappresentata nellโimmagine qui sopra รจ la struttura del box model. Osservandola con attenzione possiamo renderci conto che il bostro box si compone di diversi elementi:
- lโarea dei contenuti (in rosa);
- un (eventuale) padding (azzurro);
- un (eventuale) bordo (verde);
- un (eventuale) magine (grigio).
Questi quattro elementi, possiamo dire, costituiscono lo scheletro del nostro box.
Si noti, ancora, che in questa rappresentazione i vari elementi costitutivi del box-model sono stati rappresentati con colori differenti ma ciรฒ non deve trarre in inganno. Lโarea di contenuto, nella pratica, ha lo stesso colore di sfondo del suo padding in quanto questโultimo รจ la distanza interna che separa i contenuti dallโeventuale bordo, si tratta di una sorta di spaziatura interna e si distingue dal margin che, viceversa, rappresenta la spaziatura esterna (cioรจ quella esterna allโeventuale bordo del box) utilizzata per separarare i diversi elementi della pagina.
Il problema delle dimensioni nel box-model
Uno dei problemi tipici e piรน comuni di chi inizia a lavorare coi CSS รจ comprendere il sistema per il calcolo delle dimensioni dei box. Stando alle regole del W3C lโingombro del box รจ dato dalla somma di tutti questi quattro elementi, quindi:
larghezza area contenuti + padding + border + margin
Se noi, ad esempio, definiamo un box con questo stile:
.box {
width: 400px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
il suo ingombro complessivo dovrร essere calcolato in questo modo:
400 + ((10 + 5 + 20) * 2)
per un totale calcolato di 470 pixel.
Si noti che le dimensioni di padding, border e margin sono moltiplicate per due in quanto, ovviamente, si aggiungono tanto alla sinistra quanto alla destra dellโarea contenuti.
La formula che abbiamo utilizzato ci รจ servita per calcolare lโingombro complessivo del nostro box, tuttavia se avessivo voluto calcolare solo lโingombro dellโarea "visibile" (ovvero il box fino al suo bordo compreso) avremmo dovuto effettuare i calcoli escludendo i margini.