CSS: proprietà del box model

Per definire definire e controllare le diverse proprietà del box-model ci sono degli attributi che possono essere assegnati al box in modo da definirne le caratteristiche.

La proprietà HEIGHT: l'altezza di un contenuto è data dalla dimensione del suo contenitore. Non è ereditata e si applica ad ogni elemento tranne colonne di tabelle e elementi inline non rimpiazzati.

Height può essere definito con valori espressi in pixel, in percentuale o con auto.

   div {height: 250px;}

   ul {height: 50%;}

   p {height: auto;}

min-height imposta il valore minimo dell' altezza di un box e può essere impostato con un valore espresso in pixel o in percentuale:

   div {min-height: 200px;}

   p {min-height: 30%;}

max-height imposta il valore massimo dell' altezza di un box e può essere impostato con un valore espresso in pixel, in percentuale o none come valore di default che non delimita l'altezza:

   div {max-height: 400px;}

   p {max-height: 40%;}

   form {max-height: none;}

Quando il valore di height supera il valore assegnato è possibile utilizzare la proprietà overflow, è da usare quando si vogliano creare box ad altezza fissa ma con molti contenuti. Si applica a tutti gli elementi blocco e non è ereditata:

   div {overflow: auto;}

   p {overflow: hidden;}

   div {overflow: visible;}

   p {overflow: scroll;}

auto assegna l'altezza di default facendo apparire la scrollbar;

visible mostra il contenuto eccedente;;

hidden nasconde il contenuto che eccede dal box.

scrool crea la barra di scorrimento per mostrare il contenuto eccedente

 

Per impostare la larghezza di un contenuto di un box si usa la proprietà width, escludendo i valori del padding e del border, come visto nella presentazione del Box Model.

La proprietà width non è ereditata e può assumere i valori in pixel, in percentuale con il valore auto che si adatta alla grandezza del box contenitore:

   div {width: auto;}

   p {width: 90px;}

   div.box {width: 50%;}

Possiamo utilizzare la proprietà min-width per impostare la larghezza minima di un box utilizzando valori in pixel o in percentuale:

   div {min-width: 400px;}

   p {min-width: 40%;}

Può essere assegnata insieme alla proprietà width:

   div {

    width: 70%;

    min-width: 400px;

	}

Anche max-width è una proprietà per assegnare un valore massimo alla larghezza di un box. Può assumere valori in pixel, in percentuale o il valore di default none. Può essere utilizzata insieme al volore width:

.box-2 {

   width: 70%;

   max-width: 800px;

   height: 200px;

   padding: 10px;

   border: 1px solid #002c53;

   background: #568ec0;

	}

 

Con margin si definisce la distanza tra il bordo di un elemento e gli elementi adiacenti.

Margin è la proprietà che assegna in forma abbreviata il valore dei margini di un box:

	div {margin: 10px 15px 10px 20px;}

l'ordine dei valori va considerato in senso orario:

margin: superiore, destro, inferiore, sinistro

Un’ulteriore abbreviazione della sintassi si può ottenere usando tre, due o un solo valore. Queste le regole:

  • se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore;
  • se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro;
  • se si usa un solo valore, un uguale distanza sarà applicata ai quattro lati.

possiamo assegnare il valore ai margini anche in modo separato usando le proprietà margin-top - margin-right - margin-bottom - margin-left

	div {

	 margin-top: 10px;

	 margin-right: 15px;

	 margin-bottom: 10px;

	 margin-left: 20px;

	}

Le proprietà di margin non sono ereditarie e possono essere assegnati i valori in pixel, in percentuale o con il valore di default auto

 

Con la proprietà padding si crea lo spazio intorno al contenuto del box.
Valgono per essa tutte le osservazioni e le regole sintattiche viste per la proprietà margin, sia per la formula abbreviata, che segue le regole sopracitate per margin e per padding:

	div {padding: 10px 15px 10px 20px;}

sia per quanto riguarda le proprietà singole:

	div {

	 padding-top: 10px;

	 padding-right: 15px;

	 padding-bottom: 10px;

	 padding-left: 20px;

	}

 

Possiamo dividere la proprietà border in due categorie:

proprietà singole:

	border-top-color, border-top-style, border-top-width, border-bottom-color,

	border-bottom-style, border-bottom-width, border-right-color, border-right-style,

	border-right-width, border-left-color, border-left-style, border-left-width

propietà abbreviate:

	border, border-bottom, border-top, border-right, border-left, border-color,

	border-style, border-width

Il valore di border-color può essere definito con i colore esdecimali che scaturiscono dalla palette safe web.

Il valore di border-style può essere definito assegnando una delle seguenti parole chiavi:

Stile bordo Descrizione
none l’elemento non presenta alcun bordo e lo spessore equivale a 0
hidden equivalente a none
dotted bordo a puntini
dashed bordo a lineette
solid bordo solido e continuo
double bordo solido, continuo e doppio
groove tipo di bordo in rilievo
ridge altro tipo di bordo in rilievo
inset effetto ‘incastonato’
outset effetto ‘sbalzato’

Per definire lo spessore di un bordo width possiamo utilizzare i seguenti valori:

  • un valore numerico con unità di misura;
  • thin: bordo sottile;
  • medium: bordo di spessore medio;
  • thick: bordo di spessore largo.

 

Outline è una proprietà a sintassi abbreviata che crea uno spazio in evidenza al di fuori del bordo di un box. Anche per outline si definisce il colore, lo stile e lo spessore come per border:

   outline-color

   outline-style

   outline-width

assegnando ad outline il valore none è possibile annullarlo.

 

Con border-radius. è possibile realizzare angoli arrotondati di un elemento, con la forma abbreviata:

	border-radius

Con le forme singole:

	border-top-left-radius

	border-top-right-radius

	border-bottom-right-radius

	border-bottom-left-radius

Il funzionamento di questa proprietà segue il principio delle proprietà martin, di padding o di border.

	#box {

	border-top-left-radius:     20px;

	border-top-right-radius:    40px;

	border-bottom-right-radius: 20px;

	border-bottom-left-radius:  40px;

	}

Possiamo assegnare con la proprietà border-radius sia il raggio orizzontale sia quello verticale:

	#box {border-radius: 20px 40px 60px 80px/130px 150px 70px 90px}

Border-radius è supportato sui browser:

Internet Explorer 9, Firefox 4, Safari 5, Chrome 4.0+, Opera 10.5+.

Per rendere questa proprietà visibile sui browser che non la supportano si ricorre a soluzioni dai prefissi dei browser stessi, tranne che per le versioni vecchie di Explorer, per le quali dobbiamo escogitare soluzioni con i javascript:

	-moz-border-radius: 20px 10px 30px 40px;

	-webkit-border-radius: 20px 10px 30px 40px;

	border-radius: 20px 10px 30px 40px;