Il box model ed il posizionamento degli elementi nella pagina

La rappresentazione del box model, ovvero sia l'aspetto a livello visivo degli elementi di blocco, è un concetto fondamentale per la gestione degli elementi e le loro interazioni, nonchè per il controllo della compatibilità cross-browser del risultato finale in quanto, ad eccezione di alcune situazioni con IExplorer, reagisce in generale allo stesso modo con i restanti user agent per il web.
Il box model è responsabile di quanto spazio occupa un elemento di blocco ed il suo contenitore interagendo anche con il posizionamento degli altri elementi della pagina, inoltre comprende la presenza o meno di bordi, di margini e di spazi di riempimento (padding).
La figura seguente, Fig. 1, renderà sicuramente più comprensibili i concetti appena espressi:

Fig. 1 - CSS - Box model

Possiamo distinguere pertanto l'area del contenuto (celeste chiaro) la quale presenta uno spazio di riempimento tra la parte effettivamente utile a contenere il contenuto (in questo caso il testo) ed il bordo di colore più scuro (si noti infatti che il testo non parte proprio in posizione adiacente al bordo dell'area celeste ma è leggermente decentrato in virtù del fatto che è stato applicato al contenitore un padding appunto per distanziare il testo dal bordo del contenitore stesso).
Segue pertanto una zona occupata dal bordo appena menzionato (resa volutamente spessa per evidenziarla) dopodichè tra tale bordo e l'elemento che lo contiene è stato applicato un margine.
Il margine serve a distanziare oltre gli elementi contenuti in elementi padre dai loro stessi contenitori anche elementi adiacenti.
Sicuramente il codice seguente che restituisce il risultato dell'immagine in Fig. 1 chiarirà eventuali dubbi:

<style type="text/css">
  div#container {
    border:dotted 1px #bbbbbb;
  }

  div#content {
    width:200px;
    height:50px;
    background:#00f3f3;
    padding:20px;
    border:solid 20px #6cb5df;
    margin:20px;
  }
</style>

<div id="container">
  <div id="content">Testo del contenuto...</div>
</div>

Per motivi visivi ho impostato le dimensioni di larghezza (width) e altezza (height), sia chiaro che, come già spiegato nei precedenti articoli di questa guida, i div utilizzati sono elementi di blocco e pertanto se non avessi dichiarato quelle due proprietà la dimensione di tali contenitore avrebbe occupato tutto lo spazio in larghezza mentre l'altezza si sarebbe limitata a quella occupata dal contenuto (+ il padding ovviamente).

Da qui si evince che gli elementi di blocco hanno, ideologicamente, forma rettangolare, che le sue dimensioni dipendono non solo da quelle impostate (nel caso lo siano) ma anche dai valori di border, margin e padding e che senza dimensioni impostate o senza una proprietà float questi elementi si espandono per tutta la larghezza disponibile (dipendente dalla larghezza dell'elemento che lo contiene) più il padding e si adatta in altezza alla dimensione del contenuto meno il padding dell'elemento che lo contiene.
Quest'ultimo concetto è molto importante perchè comprendendolo si possono evitare notevoli notti insonni per problemi di impaginazione dei contenuti, anche se con IE bisogna sempre dormire con un occhio aperto.

Poco sopra è stato introdotto il concetto di float, questo è molto utile per gestire l'impaginazione dei contenuti potendo spostare a destra o a sinistra gli elementi di blocco. Per questo sono spesso indicati per i layout su colonne, anche perchè lo spostamento nella direzione indicata (left o right) finisce al raggiungimento del bordo del suo contenitore o al raggiungimento del bordo di un altro elemento adiacente anch'esso con proprietà float.
E' vero anche che la gestione dei float può rendere la vita difficile perchè, come mostrato in Fig. 2, se ad un contenuto a cui è stato impostato un float ne segue un altro a cui non è stato impostato, il contenuto non "floattato" che prima si trovava sotto al primo andrà ad occupare lo spazio laterale nella direzione opposta al float indicato.

Fig. 2 - CSS - Box model e float

Il codice seguente è una modifica di quello visto precedentemente al fine di ottenere il risultato dell'immagine di cui sopra:

<style type="text/css">
  div#container {
    border:dotted 1px #bbbbbb;
  }

  div#content {
    float:left;
    background:#00f3f3;
    padding:20px;
    border:solid 20px #6cb5df;
    margin:20px;
  }
</style>

<div id="container">
  <div id="content">Testo del contenuto...</div>
  <div>
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
    Testo non flottato fuori dal contenitore flottato<br />
  </div>
</div>

Nel caso in cui il contenitore aggiunto al secondo esempio (quello che contiene le varie scritte e che non ha alcun attributo id) avesse avuto la proprietà float (sempre in direzione left) il testo si sarebbe ugualmente affiancato sulla destra del blocco precedente ma non sarebbe "scivolato" sotto bensì avrebbe continuato a seguire la linea dei testi precedenti perchè a quel punto il contenitore sarebbe diventato un vero e proprio blocco rettangolare.

Per interrompere il flusso dei float è possibile assegnare la dichiarazione clear:both; e, nel caso dell'esempio, se lo assegnassi al contenitore prima citato, il blocco con i vari messaggi di testo andrebbe ad occupare una nuova riga, sotto il primo contenitore, ridefinendo un nuovo punto di partenza e riassegnando graficamente un'altezza al box contenitore.

Il posizionamento degli elementi nella pagina può seguire regole diverse se viene utilizzata la proprietà position ed i suoi valori: static, relative, absolute e fixed.
Il primo è semplicemente il valore di default, si utilizza nel caso in cui si voglia sovrascrivere una regola con proprietà position  ed uno degli altri valori.
Il secondo posiziona l'elemento in relazione al suo contenitore in base alle proprietà top, left, bottom e right.
Il valore absolute invece estrae letteralmente l'elemento dal documento e lo posiziona nel margine in alto a sinistra del suo contenitore.
Mentre con fixed si continua ad estrarre l'elemento dal contesto ma si fa in modo che esso resti posizionato in un determinato punto dello spazio occupato dal browser e ci resti anche in caso di scorrimento della pagina (si trova spesso utilizzato per bloccare il menù di navigazione di un sito o le pubblicità nella colonna laterale allo scorrimento della pagina).

Tutti i concetti appena espressi sono più facili a farsi che a dirsi e pertanto è buona norma, per prendere pratica e familiarità con gli elementi ed il posizionamento, eseguire dei test e valutarne con cognizione il risultato.

Nei vari articoli di questa guida ho fatto uso di diverse proprietà e di alcuni dei valori che esse possono assumere, tuttavia la lista è estremamente lunga e dedicare una parte solamente alla spiegazione delle loro finalità risulterebbe essere oltre che pesante anche poco funzionale considerando che il risultato ottenibile dalla maggior parte di esse è decisamente intuibile sia dal nome della proprietà che da quello che può assumere il valore, nonchè il campo di applicazione di alcune di esse si espande a diversi contesti e riuscire ad abbracciare tutte le casistiche lo trovo da parte mia un po' troppo dispersivo.
Consiglio pertanto, per una consultazione più dettagliata delle singole proprietà, di avvalersi delle specifiche CSS sul sito w3.org il cui link diretto alla sezione si trova nell'articolo di riepilogo di questa guida.
Inoltre per gli amanti di Visual Studio o software affini è possibile fare riferimento ai suggerimenti automatici in fase di scrittura di codice per avere a disposizione l'elenco più o meno completo delle principali proprietà e dei relativi valori.