I dettagli del modello di formattazione visuale CSS sono importanti al fine di permetterci di capire cosa avviene durante il dimensionamento degli elementi e la creazione dei loro blocchi contenitori. Comprendere questi dettagli ci aiuta nella scrittura del codice CSS e nella creazione di layout complessi.
Definizione di blocco contenitore
Il blocco contenitore (BC) di un elemento viene definito come segue:
Il BC nel quale vive l'elemento radice è un rettangolo con le dimensioni del viewport, ancorato all'origine del canvas per i media continui e all'area di pagina per i media impaginati. Questo BC viene detto blocco contenitore iniziale (BCI).
Per gli altri elementi, se la posizione dell'elemento è 'relative' o 'static', il BC è formato dal limite del contenuto dell'antenato più prossimo (di blocco, cella di tabella o inline-block).
- Importante: Se l'elemento ha 'position: fixed', il BC viene stabilito dal viewport nel caso dei media continui o dal box di pagina per i media impaginati.
- Importante:
Se l'elemento ha 'position: absolute', il BC viene stabilito dall'antenato più prossimo con una posizione
'absolute', 'relative' o 'fixed' nel modo seguente:
Se la direzione di scrittura è 'ltr', la parte superiore e sinistra del BC sono i limiti superiore e sinistro del padding del primo box generato dall'antenato, e la parte inferiore e destra sono i limiti inferiore e destro del padding dell'ultimo box dell'antenato.
Se la direzione di scrittura è 'rtl', avviene la stessa cosa, ma in questo caso per la parte superiore e destra.
Altrimenti, il BC viene formato dal limite del padding dell'antenato.
- Importante: Se non esiste un simile antenato, il BC è il BCI.
La proprietà 'width'
| Valore: | <length> | <percentage> | auto | inherit |
|---|---|
| Iniziale: | auto |
| Si applica a: | tutti gli elementi, tranne gli elementi inline non rimpiazzati, righe di tabella e gruppi di riga |
| Ereditata: | no |
| Percentuali: | in riferimento alla larghezza del BC |
| Media: | visuale |
| Valore calcolato: | la percentuale, 'auto' o la lunghezza assoluta; 'auto' se la proprietà non si applica |
Questa proprietà specifica la larghezza dell'area di contenuto per gli elementi di blocco e rimpiazzati. I valori sono:
- <length>
- Specifica un'unità di misura.
- <percentage>
- Specifica una larghezza in percentuale, calcolata rispetto alla larghezza del BC.
- auto
- Dipende da altri valori (vedi sotto).
I valori negativi non sono ammessi.
Calcolo della larghezza e dei margini
I valori delle proprietà 'width', 'margin-left', 'margin-right', 'left' e 'right' di un elemento variano in base al tipo di elemento. Alcune situazioni:
- Elementi inline non rimpiazzati
La proprietà 'width' non si applica. Un valore calcolato (vc) di 'auto' per 'left', 'right', 'margin-left', 'margin-right' = 0, ossia valore in uso (vu).
- Elementi inline rimpiazzati
Un vc = 'auto' per 'margin-left' o 'margin-right' diviene vu = 0.
Se 'width' ha vc = 'auto' e anche 'height' = 'auto', la larghezza intrinseca dell'elemento diviene il vu di 'width'.
Se 'width' ha vc = 'auto' e 'height' ha vc != 'auto', e l'elemento ha un rapporto intrinseco (ri), allora il vu di 'width' sarà:
(ri) * (altezza in uso)
- Elementi di blocco nel flusso normale
Larghezza del BC = 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'
Se 'width' = 'auto', ogni altro valore 'auto' = 0; la larghezza deriva dalla conseguente uguaglianza.
Importante: Se 'margin-left' e 'margin-right' sono 'auto', il loro vu è uguale. Questo fa si che l'elemento sia centrato orizzontalmente rispetto ai limiti del BC. - Elementi flottati
Se 'margin-left' o 'margin-right' sono calcolati come 'auto', il loro vu = 0.
Se 'width' viene calcolata come 'auto', il vu è una larghezza shrink-to-fit, ossia una larghezza determinata unicamente dalla quantità di contenuto, in modo simile all'algoritmo usato per il layout di tabella automatico.
- Elementi posizionati in modo assoluto
Larghezza del BC = 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right'
Se 'width' = 'auto', allora si applica l'algoritmo "shrink-to-fit".
La proprietà 'height'
| Valore: | <length> | <percentage> | auto | inherit |
|---|---|
| Iniziale: | auto |
| Si applica a: | tutti gli elementi, tranne gli elementi inline non rimpiazzati, colonne di tabella e gruppi di colonna |
| Ereditata: | no |
| Percentuali: | in riferimento all'altezza del BC |
| Media: | visuale |
| Valore calcolato: | la percentuale, 'auto' o la lunghezza assoluta; 'auto' se la proprietà non si applica |
Questa proprietà specifica l'altezza dell'area di contenuto per gli elementi di blocco, inline-block e rimpiazzati. I valori sono analoghi a 'width', con la differenza che la percentuale viene calcolata rispetto all'altezza del BC. I valori negativi non sono ammessi.
Calcolo dell'altezza e dei margini
I valori delle proprietà 'top', 'margin-top', 'height', 'margin-bottom' e 'bottom' di un elemento variano in base al tipo di elemento. Alcune situazioni:
- Elementi inline non rimpiazzati
La proprietà 'height' non si applica. Alcuni problemi di calcolo:
L'altezza dell'area di contenuto dovrebbe essere basata sul font in uso, ma le specifiche non dicono come.
Solo la proprietà 'line-height' viene usata nel calcolo dell'altezza di un box di riga.
Il padding, bordo e margini verticali iniziano sulla parte superiore e inferiore dell'area di contenuto.
Se ci sono più font, le specifiche non definiscono l'altezza dell'area di contenuto.
- Elementi inline rimpiazzati
Il vu di 'height' è dato da:
(larghezza in uso) / ri
- Elementi di blocco nel flusso normale
Se 'margin-top' o 'margin-bottom' = 'auto', allora vu = 0.
Se 'height' = 'auto', allora l'altezza dipende dalla quantità di contenuti.
- Elementi flottati
Come il precedente.
- Elementi posizionati in modo assoluto
Altezza del BC = 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom'
Importante: Se 'top' ha valore 'auto', allora si applica la posizione statica, ossia la posizione che l'elemento avrebbe nel flusso normale. Per 'top' è uguale alla distanza dal limite superiore del BC al limite del margine superiore di un ipotetico box che sarebbe stato il primo box dell'elemento se la posizione fosse stata 'static'.
Nota sulle proprietà 'min-width', 'max-width', 'min-height','max-height'
Le proprietà 'min-width', 'max-width', 'min-height' e 'max-height' servono a stabilire, rispettivamente, la larghezza e l'altezza minima e massima di un elemento. Esse accettano gli stessi valori delle proprietà 'width' e 'height'. Purtroppo il supporto di Internet Explorer per Windows è scarso se non addirittura assente (versioni 6 e 5). Tuttavia, è possibile usare le espressioni di Explorer per far si che i valori dichiarati vengano rispettati. Per esempio, la seguente dichiarazione:
#box {width: 50%; max-width: 300px}
in Internet Explorer diventa:
<head>
<!--[if IE]>
<style type="text/css">
#box {width:expression(document.body.clientWidth > 1300 ? "300px" : "50%" );}
</style>
<![endif]-->
</head>
Usando i commenti condizionali facciamo in modo che il nostro CSS venga validato.