Formazione web: XHTML e CSS2
Il Box Model - Nona parte -
La proprietà Overflow
L'ultima proprietà da analizzare a proposito del box-model è la proprietà overflow. Quando abbiamo un elemento all'interno di un box che supera in larghezza la dimensione impostata per il box stesso (ad esempio una parola molto lunga o un'immagine), questa potrebbe uscire all'infuori del box senza alterarne la larghezza. Il risultato si vede bene nell'immagine seguente:
Come potete notare l’immagine supera in larghezza la dimensione del blocco contenitore e quest’ultimo tuttavia non modifica le sue dimensioni. Per controllare il comportamento dell’immagine è importante la proprietà overflow da attribuire al blocco contenitore; tale proprietà ammette i seguenti valori:
- visible: #contenitore{overflow: visible}, dice che il contenuto deve essere mostrato nella sua interezza, e il blocco contenitore non deve modificare la sua dimensione, non sarebbe altro che il risultato mostrato nell’immagine precedente.
- hidden: #contenitore{overflow: hidden}, indica che il contenuto che eccede deve essere tagliato.
- scroll: #contenitore{overflow: scroll}, indica che il blocco contenitore deve essere fornito di barre di scorrimento. Tali barre appariranno anche quando il contenuto non eccede in modo da creare un aspetto grafico uniforme.
- auto: #contenitore{overflow: auto}, indica che il blocco contenitore deve essere fornito di barre di scorrimento se e soltanto se richiesto, quindi solo se c’è contenuto che eccede.
