Immaginiamo di dover dipingere un quadro. Le prime due cose di cui dobbiamo occuparci sono i colori di base e le proporzioni del dipinto. Per i colori di base, dobbiamo solo assicurarci che il contrasto tra colore di sfondo e di primo piano soddisfi i requisiti del W3C. Per il resto, siamo liberi di assecondare la nostra fantasia. Per le proporzioni, invece, dobbiamo operare dei calcoli precisi per fare in modo che i contenuti trovino spazio sulla pagina. Spazio è la parola chiave. Il nostro layout fluido dovrà adattarsi alle varie risoluzioni di schermo senza mostrare sovrapposizioni di elementi o la comparsa della temuta barra di scorrimento orizzontale. Poiché useremo misure in percentuale, dobbiamo tenere presente che:
Qui entra in gioco il box model dei CSS e i calcoli che ne derivano. In breve:
i margini orizzontali, il padding orizzontale o i bordi destro e sinistro di un elemento si sommano alla larghezza espressa esplicitamente tramite la proprietà
width
. Per esempio, supponendo di avere i seguenti elementi di blocco:
Nei browser che rispettano il box model standard, l'elemento #child
fuoriuscirà dal suo genitore,
perché la seconda regola fa in modo che tale elemento occupi tutta la larghezza del suo genitore, più 2em complessivi
per il padding destro e sinistro.
Se lo scopo della seconda regola era quello di lasciare dello spazio tra i contenuti del box figlio e il suo genitore, allora si sarebbe potuto scrivere solo:
Così facendo il box figlio coinciderà ma non supererà il suo genitore,
in quanto la larghezza complessiva del blocco contenitore (l'elemento #box
) resterà inalterata
per la proprietà height
vale quanto detto per i calcoli della proprietà width
,
ma stavolta la somma va fatta tenendo presente i margini e il padding verticali e i bordi superiore ed inferiore.
Stabilite queste norme, dobbiamo decidere quale dimensione assegnare agli elementi della nostra pagina. Tenendo presente che si dovrebbe comunque garantire una certa leggibilità evitando una lunghezza di riga eccessiva, stabiliamo che:
Detto questo, passiamo a vedere in dettaglio il layout dei vari elementi.