Il box model | Guida CSS

Il box=20 model

Se volete usare i CSS per scopi che vadano oltre la = semplice=20 gestione di sfondo e testo dovete avere ben chiaro il = meccanismo che=20 governa la presentazione dei vari elementi di una pagina. = Torniamo=20 per un attimo alla prima lezione. Abbiamo l=EC mostrato che = una pagina=20 (X)HTML non =E8 altro che un insieme di box rettangolari, = che si=20 tratti di elementi blocco o di elementi inline = non fa=20 differenza. Tutto l'insieme di regole che gestisce l'aspetto = visuale=20 degli elementi blocco viene in genere riferito al = cosiddetto=20 box model.

Ogni box comprende un certo numero di componenti di base, = ciascuno modificabile con propriet=E0 dei CSS. La figura qui = sotto=20 mostra visivamente tali componenti:

3D"Figura

Partendo dall'interno abbiamo:

l'area del contenuto. E' la zona in cui trova = spazio il=20 contenuto vero e proprio, testo, immagini, animazioni = Flash. Le=20 dimensioni orizzontali dell'area possono essere modificate = con la=20 propriet=E0 width. Quelle verticali con = height.=20
il padding. E' uno spazio vuoto che pu=F2 = essere creato=20 tra l'area del contenuto e il bordo dell'elemento. Come si = vede=20 dalla figura, se si imposta un colore di sfondo per = un=20 elemento questo si estende dall'area del contenuto alla = zona di=20 padding.=20
il bordo. E' una linea di dimensione, stile e = colore=20 variabile che circonda la zona del padding e l'area del = contenuto.=20
il margine. E' uno spazio di dimensioni = variabili che=20 separa un dato elemento da quelli adiacenti.

Attenzione. Queste cose non sono state introdotte con i = CSS, ma=20 fanno parte del normale meccanismo di rendering di un = documento.=20 Quando realizziamo una pagina (X)HTML senza fogli di stile = =E8 il=20 browser ad applicare per alcune di queste propriet=E0 le sue = impostazioni predefinite. Per esempio, introdurr=E0 un certo = margine=20 tra un titolo e un paragrafo o tra due paragrafi. La = novit=E0 =E8 che=20 con i CSS possiamo controllare con precisione al pixel tutti = questi=20 aspetti.

Il box model =E8 governato da una serie di regole = di base=20 concernenti la definizione di un box e il suo rapporto con = gli altri=20 elementi.

1. Larghezza del box

Bisogna distinguere tra la larghezza dell'area del = contenuto e la=20 larghezza effettiva di un box . La prima =E8 data dal valore = della=20 propriet=E0 width. La seconda =E8 data da questa = somma:

margine sinistro + bordo sinistro + = padding sinistro=20 + area del contenuto + padding destro + bordo destro + = margine=20 destro

Come si vede infatti nella figura margini, padding e = bordi devono=20 considerarsi a tutti gli effetti parte dell'area complessiva = dell'elemento. L'esempio chiarisce anche visivamente = questo=20 aspetto (attenzione: se visualizzate questa pagina con = Explorer=20 5/5.5 su Windows non vedrete la cosa giusta. Questo browser=20 interpreta male il concetto di larghezza. Per chiarimenti e=20 soluzioni si veda la lezione dedicata alla propriet=E0=20 width).

2. Larghezza ed elemento contenitore

Se non si imposta alcun valore per la propriet=E0 = width o se=20 il valore usato =E8 auto la larghezza di un box =E8 = uguale a=20 quella dell'area del contenuto dell'elemento contenitore.=20 Quest'ultimo =E8 l'elemento che racchiude il box. Esempio.

3. Uso del valore auto

Solo per tre propriet=E0 =E8 possibile impostare il = valore=20 auto: margini, altezza e larghezza (width). L'effetto = =E8=20 quello di lasciar calcolare al browser l'ammontare di = ciascuna di=20 esse in base alla risoluzione dello schermo e alle = dimensioni della=20 finestra.

Solo i margini possono avere valori negativi. Ci=F2 non = =E8=20 consentito per padding, bordi, altezza e larghezza.

4. Margini verticali e orizzontali tra gli = elementi

Per due box adiacenti in senso verticale che abbiano = impostato un=20 margine inferiore e uno superiore la distanza non sar=E0 = data dalla=20 somma delle due distanze. A prevalere sar=E0 invece la = distanza=20 maggiore tra le due. E' il meccansimo del cosiddetto = margin=20 collapsing. Tale meccanismo non si applica ai box = adiacenti in=20 senso orizzontale. Esempio.

Ulteriori approfondimenti su questi argomentii li = troverete nelle=20 prossime lezioni, quando affronteremo l'analisi delle = singole=20 propriet=E0. Qui aggiungiamo che regole particolari su = alcuni degli=20 aspetti trattati si applicano agli elementi posizionati. Ne=20 parleremo in una lezione specifica.

Links

Il=20 box-model secondo il W3C: complesso e un p=F2 = intricato.

Il box-model, teoria e pratica: ottimo = tutorial=20 sul sito WebReference.com. Lettura vivamente consigliata. =

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =