Introduzione ai CSS - Il visual formatting model
Tuesday 29 January 2008 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Il visual formatting model stabilisce le regole per la generazione dei box da parte degli elementi.
La posizione che un box assume nel flusso dei contenuti della pagina può essere determinata:
- Dalle dimensioni e dal tipo di box.
- Dallo schema di posizionamento.
- Dalle relazioni tra gli elementi nell'albero.
- Da informazioni esterne: dimensioni dell'area di visualizzazione, dimensioni intrinseche delle immagini ecc.
La posizione e le dimensioni dei box sono calcolate rispetto ai contorni di un box rettangolare chiamato blocco contenitore.
In generale i box generati dagli elementi si comportano come blocco contenitore per gli elementi discendenti.
Ad ogni box è assegnata una posizione rispetto al suo blocco contenitore, ed in alcuni casi può anche superarne le dimensioni (overflow).
Gli schemi di posizionamento
- Flusso normale
- I box a blocco scorrono a partire dalla sommità del loro blocco contenitore mentre i box in linea scorrono da sinistra a destra. I margini verticali si combinano (collapse).
- Floating (fluttuazione)
- Il box fluttuante è proiettato il più possibile a sinistra, o a destra. Il contenuto dei box adiacenti può scorrere su un lato del box. I margini verticali non si combinano.
- Posizionamento assoluto
- Il box è rimosso dal flusso della pagina. Non influenza la posizione dei box adiacenti e non è influenzato da essi. La posizione è assegnata rispetto al blocco contenitore e i margini verticali non si combinano.
La proprietà position
Questa proprietà determina quale degli algoritmi di posizionamento sarà utilizzato. I valori possibili sono:
static- E' il valore predefinito. Il box è disposto secondo il flusso normale. Le proprietà
top,right,bottomeleftnon si applicano. relative- Il box è inizialmente disposto in accordo al flusso normale. Successivamente è deviato dalla sua posizione iniziale in funzione dei valori assegnati alle proprietà
top,right,bottomeleft. I box adiacenti non sono influenzati: si comportano come se il box fosse ancora nella sua posizione iniziale. absolute- La posizione dell'elemento è definita rispetto al suo blocco contenitore dai valori assegnati alle proprietà
top,right,bottomeleft fixed- La posizione è calcolata in modo analogo al valore
absolute, tranne per il fatto che il box è fisso: non si muove quando il documento è scrollato. Il blocco contenitore di un box fisso è l'area di visualizzazione (viewport) del browser.
IE 6 e le versioni precedenti non supportano il valore fixed associato al posizionamento (mentre è parzialmente supportato per lo sfondo). IE 5.2 per Mac e IE 7 lo supportano.
Le proprietà top, right, bottom e left
Consentono di disporre i box generati dagli elementi posizionati in modo assoluto, relativo e fisso. I valori possibili sono:
- lunghezza
- Una distanza fissa dal limite di riferimento espressa in una delle unità di misura CSS. Sono ammessi valori negativi.
- percentuale
- Una percentuale della larghezza, o dell'altezza, del blocco contenitore. Sono ammessi valori negativi.
auto- Il valore è calcolato automaticamente dal browser.
Queste proprietà, nel posizionamento assoluto indicano le distanze dei lati del box dai corrispondenti lati del blocco contenitore. Nel posizionamento relativo la distanza è riferita alla posizione iniziale del box stesso.
Ecco un esempio di regola che posiziona un box in modo assoluto, esattamente a 10 pixel dall'alto e a 10 pixel da sinistra:
- #box {
- width: 200px;
- position: absolute;
- top: 10px;
- left: 10px;
- }
La proprietà z-index
Si applica agli elementi posizionati e consente di controllarne l'ordinamento nell'asse z. I valori possibili sono numeri interi positivi o negativi oppure auto.
Normalmente, gli elementi che compaiono per ultimi nel codice sono in primo piano rispetto ai precedenti.
Uno z-index negativo pone l'elemento dietro il suo blocco contenitore mentre un valore pari a 0 o maggiore lo pone davanti.
Se due elementi hanno lo stesso blocco contenitore e lo stesso valore per la proprietà z-index l'elemento che compare per ultimo nel codice sarà in primo piano.
Posizionamento dei box fluttuanti
La proprietà float specifica se un box fluttuerà a sinistra, a destra, oppure in nessuna delle due direzioni, rispetto al suo blocco contenitore.
I valori possibili sono:
left- L'elemento fluttua a sinistra rispetto al suo blocco contenitore. Il contenuto esterno al box scorre sul lato destro a partire dalla sommità del box.
right- Il box fluttua a destra e il contenuto esterno scorre sulla sinistra.
none- Il box non fluttua.
La proprietà clear, se applicata a un elemento che segue un box fluttuante, impedisce a quest'ultimo di sovrapporsi ad esso nel flusso normale.
Una spaziatura (clearance) è introdotta sopra il margine superiore dell'elemento al quale è applicata la proprietà, allo scopo di spingerlo verticalmente verso il basso oltre il box flottante evitando che quest'ultimo gli si sovrapponga.
I valori possibili sono:
left- Il margine superiore è incrementato della quantità necessaria per posizionare il limite del bordo superiore del box sotto il limite esterno inferiore di ogni box flottante a sinistra che compare prima nel documento.
right- Il margine superiore è incrementato della quantità necessaria per posizionare il limite del bordo superiore del box sotto il limite esterno inferiore di ogni box flottante a destra che compare prima nel documento.
both- Il margine superiore è incrementato della quantità necessaria per posizionare il limite del bordo superiore del box sotto il limite esterno inferiore di ogni box flottante a sinistra e a destra che compare prima nel documento.
none- Nessun vincolo è applicato alla posizione del box rispetto ai box flottanti.
Articolo incompleto. Lo finisco appena posso!
Wednesday 30 January 2008 10:39
Ottimo articolo!
Ci provai anche io con uno screencast a spiegare qualcosa sulle posizioni, ma sono molto meno bravo a spiegare :D
Complimenti ancora!!!
Wednesday 30 January 2008 10:43
Ciao Dimitri, grazie ;). Lo sai che questa guida è aperta alle collaborazioni?
Wednesday 30 January 2008 16:19
molto utile, grazie;)
Friday 1 August 2008 9:51
Ottimo articolo! Avrei una domanda riguardo a
>>Posizionamento assoluto
Il box è rimosso dal flusso della pagina. Non influenza la posizione dei box adiacenti e non è influenzato da essi. La posizione è assegnata rispetto al blocco contenitore e i margini verticali non si combinano.
Non ci sarebbe un modo per influenzare un altro box della pagina da questo sudetto assoluto?
Se io volessi appunto posizionare absolute un box che però varia la sua altezza a seconda di quanto testo deve contenere, e volessi che sempre sotto di esso ne stesse un altro, di conseguenza, non absolute…
Consigli?
Friday 1 August 2008 10:34
Ciao Ciel, purtroppo non è possibile. Un box posizionato in modo assoluto non “spinge” sotto i box che lo seguono proprio perchè è slegato dal flusso del documento. Se proprio vuoi però ci sono delle soluzioni con Javascript: Multi-Column Layout With Footer, Footer positioned using Javascript.
Ricorda sempre però di controllare che succede disabilitando Javascript.
Friday 1 August 2008 11:09
Grazie del chiarimento.
Posso chiederti un’altra cosa?
Ma se questa operazione senza js non è possibile, solitamente che “tecnica” si usa per i layout grafici con “div-main” centrato/quasi centrato (comunque non attaccato al bordo della pagina), che usano un footer (per il copyright e/o magari la chiusura grafica dello sfondo che fa da contorno)?
Si mettono 1 div (o 2) che fa da “colonna” la quale larghezza è la distanza da cui il div-main è separato da margine sinistro della pagina?
Scusa la confusione… e grazie ^.^
Friday 1 August 2008 11:42
Di solito si usa il posizionamento float. Ti suggerisco questa risorsa: Floatutorial che spiega passo dopo passo tutto ciò che puoi fare con i box fluttuanti ;).
Friday 1 August 2008 20:23
Grazie mille, ci ho dato un’occhiata di “anteprima”… se ho capito bene, per esempio, potrei usare un layout di questo tipo dove i div di destra e sinistra servono semplicemente da “distanziatori” dal bordo della pagina per il centrale… sbaglio?
Saturday 2 August 2008 13:40
Il link che hai inserito non ha l’href :D
Saturday 2 August 2008 17:00
No comment… scusa: questo!
Sunday 3 August 2008 13:35
Ciao, il layout che indichi lo visualizzo male con ie7 e ff3, fai qualche test prima di usarlo. Ma i contenitori di destra e di sinistra non sono semplici distanziatori: possono contenere testo, immagini ecc. e se superassero in altezza il contenitore centrale non ci sarebbe problema: il footer sarebbe spinto in basso. Nella pagina ThreeColumnLayouts della lista CSS Discuss (moderata dal grande Eric Meyer) puoi trovare un bel po’ di esempi di layout a tre colonne ;).
Sunday 3 August 2008 16:24
Grazie ancora! ^.^