I box, altrimenti detti sistema a gabbie, rappresentano gli elementi di base dei layout tableless. Vediamo una panoramica sullo loro formattazione con i CSS.
Il box model, visto in qualche articolo precedente, è uno strumento molto flessibile e ben progettato. Con esso si possono reimpaginare tutti quei layout elaborati che per anni sono stati racchiusi dentro le tabelle. Ovviamente, come in tutte le cose, c'è il rovescio della medaglia: i box hanno una serie di problemi, in termini di visualizzazione nel browser e si deve anche dire che questi ultimi non "parlano" tutti la stessa lingua. Innanzitutto si deve affermare questo: le gabbie non si comportano come le tabelle. Le tabelle servono solo a mostrare a video i dati e non per impaginare layout.
Il concetto di flusso dei box
Il concetto di flusso è molto semplice: gli oggetti cominciano a disporsi nell'angolo sinistro, in alto, dello schermo; man mano che ne vengono aggiunti altri, si posizionano a destra e poi sotto il primo e così via, proprio come quando si scrive in un qualsiasi editor di testi. Il concetto di flusso è universale: se un oggetto ha delle caratteristiche speciali che gli danno un comportamento "differente", le specifiche lo dichiareranno espressamente.
Tutto ciò che non viene definito fuori dal flusso, è inserito nel flusso stesso. Questo concetto è molto importante quando si realizzano dei box. Si osservino queste righe di codice:
body{
margin:0px;
padding: 0px;
color:#000;
background-color:#e6e6e6;
font-family:Verdana,sans-serif;
}
.gabbia{
padding:10px;
margin:5px;
background-color:#fff;
border:1px solid #000;
}
<body>
<div class="gabbia">1</div>
<div class="gabbia">2</div>
<div class="gabbia">3</div>
<div class="gabbia">4</div>
</body>
Ci si aspetta, come è facile supporre, un risultato come raffigurato di seguito, vale a dire 4 div, disposti orizzontalmente, uno accanto all'altro:
Il risultato possiamo vederlo nell'esempio.
Perchè accade questo? Accade perchè un <div> è un elemento a livello di blocco, quindi ognuno di essi occupa la sua riga. Ecco che ritroviamo il concetto di flusso, ed avviene in maniera corretta. Questi <div> si allargano per tutta l' ampiezza della finestra del browser perchè non hanno niente che li ostacoli. La larghezza dei box non è stata dichiarata ed il loro margin è di 5px; quindi il lato destro si espanderà fino a che non incontrerà "qualcosa", cioè il lato destro della finestra. Se, invece, inseriamo qualche altro elemento tra i div, come nel codice seguente:
<body> <div class="gabbia">1</div> Lorem ipsum dolor sit amet, consectetuer....... <div class="gabbia">2</div> <div class="gabbia">3</div> <div class="gabbia">4</div> </body>
il risultato sarà quanto riportato nell'esempio.
Se ai box viene assegnata una dimensione, per esempio del 50% (sempre rispetto alla finestra del browser), avremo il seguente risultato.
Le gabbie, andranno "a capo" senza avere nulla al loro lato destro, perchè elementi di blocco. Inoltre i box che seguono questo flusso, si dicono posizionati staticamente. Non è necessario includere questa regola nel codice CSS in quanto viene inclusa di default. Oltre che in maniera statica, un box può essere posizionato in maniera relativa, assoluta o fissa. In uno dei prossimi articoli si vedrà il comportamento di un DIV con una posizione relativa.