| i box e il visual formatting model | ||
| http://www.w3.org/TR/REC-CSS2/visuren.html | ||
|
il visual formatting model descrive come lo UA (User Agent=browser) elabora l'albero dei documenti:
ogni elemento genera da zero a n BOX, che vengono posizionati nella pagina in funzione del tipo e delle dimensioni del box,
dello schema di posizionamento, della relazione tra gli elementi del documento e da eventuali informazioni esterne (es.: le immagini). Gli elementi di una pagina sono di due tipi: BLOCK-LEVEL e INLINE e possono essere anomini o avere un nome (definito nel foglio di stile) | ||
| geometria | ||
| dall'esterno: margine, bordo, padding, testo del blocco | ||
| dall'interno: testo del blocco, padding, bordo, margine | ||
| tutti i dettagli in http://www.w3.org/TR/REC-CSS2/box.html | ||
| la propriet� display | ||
|
specifica il tipo di blocco: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | ||
| la propriet� position | ||
| static | relative | absolute | fixed | inherit | ||
| la propriet� float | ||
| left | right | none | inherit | ||
| la propriet� clear | ||
| none | left | right | both | inherit | ||
| la propriet� z-index | ||
| auto | <integer> | inherit | la proprietà 'z-index' property specifica il livello di stack del blocco e se il blocco crea un contesto di stack locale | |
| la relazione tra 'display', 'position', and 'float' | ||
Le tre proprietà che influenzano la generazione e la visualizzazione dei box interagiscono come segue:
| ||
| per confronto tra il flusso normale, float e il posizionamento assoluto, si veda http://www.w3.org/TR/REC-CSS2/visuren.html#comparison | ||