Box-model
Avvicinandoci ai css questo sarà uno dei concetti più di tutti ci assilleranno. Cosa si intende per box-model?
Immaginiamo la pagina come una pagina tipografica per iniziare (esempio: un quotidiano). In esso ogni elemento presente può esser raffigurato come una scatola, ognuna delle quali può contenerne altre. Con i css dobbiamo ragionare nello stesso modo. Ogni pagina html è formata da un box principale, dentro il quale son presenti il box <body> riempito a sua volta di altre elementi.
Questi possono esser di due tipi: block-level (blocchi) o inline.
Qual è la differenza? Semplice:
- un elemento block level si posiziona sotto il blocco precedente, quello inline a fianco;
- un blocco occupa in larghezza tutto lo spazio dell’elemento che lo contiene, l’inline solo quello effettivo del suo contenuto;
- un blocco può contenere altri blocchi ed elementi inline, l’inline solo altri inline;
- un blocco possiede delle dimensioni configurabili tramite proprietà quali height e width, un inline no.
Elementi tipicamente block-level sono: ul, ol, form, p (anche se questo fa eccezione in quanto no può contenere altri blocchi al suo interno) e div, il blocco generico.
Elementi inline sono: a, em, strong, b e span, elemento inline generico.
Elenco approfondito degli elementi [in inglese].
C’è da notare che è possibile modificare tale proprietà con il comando display; display: block, rende esplicito un elemento come block-level, display:inline fa il contrario.
Una particolare proprietà dei CSS è float: cioè, letteralmente *galleggiamento*. Tale proprietà permette di disporre del testo attorno all’elemento.
L’esempio successivo spiegherà meglio di mille parole il concetto:
Notate che mentre l’immagine rossa sarà seguita da una linea di testo, con la proprietà "float:left;" ordiniamo al testo di circondare l’immagine.
La proprietà clear invece permette di stabilire se un blocco debba esser circondato da testo. Praticamente permette di ripristinare l’allineamento a seguito dell’uso di float.
Float: può assumere valori ( right | left | none) mentre clear può avere valori ( right | left | both | none ).
Un aspetto fondamentale da capire il prima possibile è la conformazione di un blocco. Approfitteremo dell’immagine presente sul sito del W3C: 
Notiamo che ogni blocco è formato da 4 sezioni concatenate:
- Contenuto
- Padding
- Bordo
- Margin
Il padding è ciò che c’è tra il bordo del blocco ed il contenuto.
Il margine è ciò che c’è tra i vari blocchi.
Impostando la larghezza (widht) attraverso i css si imposta la dimensione AL SOLO contenuto.
Quindi un blocco con width: 400px, padding: 50px; border: 10px; margin: 30px occuperà uno spazio totale di 490px, non 400 come si potrebbe esser portati a pensare le prime volte. Ovviamente lo stesso discorso vale per l’altezza.
Tutto facile? No. Internet explorer fino alla versione 5 (e se non impostato il doctype anche nella versione 6) considerava ERRONEAMENTE width come la larghezza di contenuto+padding+bordo. Questo ha portato molti errori di interpretazione ed ha costretto molti a trovare una soluzione inventando hack per risolvere il baco.
Uno dei più famosi fu la famosa Regola di Tantek.
Come funziona? Si sfrutta uno dei tanti altri bachi di explorer per fargli fare ciò che vogliamo.
Vediamola in pratica con l’esempio precedente:
div.blocco {
width:460px; #dimensione per IE5
padding:50px;
border:10px;
margin:30px
voice-family: "\"}\"";
voice-family: inherit;
width:400px;
}
body>div.blocco {
width: 400px;
}
IE 5 interpreterà la dimensione di 460px ed ignorerà tutto ciò che c'è dopo voice-family: "\"}\""; a differenza degli altri browser che leggeranno anche il resto e trovando width:400px riassegneranno la larghezza corretta. Per completezza di informazione, ci son anche browser, quali alcune versioni di Opera, che nonostante interpretino correttamente il box-model non riescono a leggere oltre il comando voice-family: "\"}\""; : a ciò serve la regola successiva body>div.blocco
Ci son altre tecniche da utilizzare: quella che io preferisco è la cosiddetta Simplified Box Model Hack (SBMH):
div.blocco {
width: 400px; \width: 460px;w\idth: 400px;
}
Qual è il principio? La prima dichiarazione, senza escape (width:400px;) verrà letta dai browser quali Opera 5, ad esempio, che non leggono ciò che segue lo slash(\); \width: 460px; sarà letto da tutti, tranne Opera5 appunto e pochi altri e ridifinerà la larghezza del box, w\idth:400px sarà seguita da tutti gli altri browser tranne, appunto, IE 5.
Semplificando: il valore corretto sarà inserito nella prima e terza proprietà; quello per IE 5 nella seconda.
Tale tecnica vale per qualsiasi proprietà, ma, e c'è un ma, secondo le regole w3c uno slash non può precedere le lettere: a, b, c, d, e, f. Quindi potrà esser sfruttata per l'altra proprietà che ci interessa per la definizione del layout, height e non, ad esempio, per font-family, cosa che ci dispiacerà poco in effetti. :)
[…] mi sa che non hai ben presente il box model: prova a dare uno sguardo a questo documento e se non capisci il senso chiedi pure […]
14 agosto, 2007 - 12:25 am[Permalink]