Nella lezione precedente abbiamo introdotto il box-model di CSS, mentre a partire da questa lezione vedremo di illustrarne le principali proprietà, ovvero width, height, padding, border e margin.
La proprietà width
La proprietà width è utilizzata per assegnare una larghezza esplicita ad un elemento di tipo block. Come abbiamo già visto, in mancanza il nostro elemento si espanderà occupando tutta la larghezza disponibile (cioè la larghezza interna del suo contenitore).
Come abbiamo già detto, tramite questa proprietà viene definita la larghezza dell’area dei contenuti e, pertanto, questo valore non deve essere inteso come la larghezza complessiva del box la quale è data dalla somma di vari elementi.
La larghezza può essere definita assegnando alla proprietà width un valore numerico (seguito da un’unità di misura come, ad esempio, px), un valore percentuale oppure "auto".
Vediamo qualche esempio:
/* valore numerico con unità di misura */
div.box1 { width: 250px; }
/* valore percentuale */
div.box2 { width: 50%; }
/* in realtà 'auto' è il valore di default quindi questa definizione è inutile */
div.box3 { width: auto; }Quando il valore di width è espresso in percentuale, l’effettiva larghezza dell’elemento verrà calcolata sulla base di quella del suo contenitore. Se si utilizza come valore "auto", invece, la larghezza verrà calcolata automaticamente dal browser secondo le regole definite per quel tipo di elemento (nel caso dei box la larghezza sarà uguale a quella del suo contenitore sotratti eventuali padding, bordi e margini).
min-width e max-width
CSS 2.1 mette a disposizione degli sviluppatori altre due proprietà collegate alla larghezza, si tratta di min-width e max-width e servono, rispettivamente, per assegnare una larghezza minima ed una massima dell’elemento.
Per entrambe queste proprietà il valore deve essere assegnato in modo numerico o percentuale.
Qualche esempio:
/* valore numerico con unità di misura */
div.box1 { min-width: 250px; }
/* valore percentuale */
div.box2 { max-width: 50%; }Ovviamente nulla vieta che un box abbia entrambe le proprietà, in questo modo:
div.box3 { min-width: 250px; max-width: 500px; }La proprietà height
La proprietà height è utilizzata per assegnare un’altezza esplicita ad un elemento di tipo block. Come abbiamo già visto, in mancanza l’altezza del nostro elemento sarà determinata solo dall’ingombro effettivo dei suoi contenuti.
Come per la proprietà width, anche l’altezza può essere definita assegnando un valore numerico (seguito da un’unità di misura), un valore percentuale oppure "auto".
Vediamo qualche esempio:
/* valore numerico con unità di misura */
div.box1 { height: 500px; }
/* valore percentuale */
div.box2 { height: 50%; }
/* in realtà 'auto' è il valore di default quindi questa definizione è inutile */
div.box3 { height: auto; }Quando il valore di height è espresso in percentuale, l’effettiva larghezza dell’elemento verrà calcolata sulla base di quella del suo contenitore a condizione che questa sia stata dichiarata in modo esplicito, viceversa non sortirà alcun effetto. Se si utilizza come valore "auto", invece, l’altezza sarà determinata solo dal contenuto.
min-height e max-height
Come per width, anche per l’altezza CSS fornisce due proprietà ulteriori: si tratta di min-height e max-height e servono, rispettivamente, per assegnare un’altezza minima ed una massima dell’elemento.
Per entrambe queste proprietà il valore deve essere definito in modo numerico o percentuale.
Qualche esempio:
/* valore numerico con unità di misura */
div.box1 { min-height: 500px; }
/* valore percentuale */
div.box2 { max-heighth: 50%; }
/* uso di entrame */
div.box3 { min-height: 250px; max-width: 500px; }La proprietà overflow
In questa lezione abbiamo visto come assegnare delle dimensioni esplicite al box mediante le proprietà width ed height. Tuttavia cosa succederebbe se i contenuti del box fossero tali da richiedere maggior spazio di quello assegnato dal web designer mediante le suddette proprietà?
In tale circostanza soccorre la proprietà overflow la quale serve, appunto, per stabilire delle regole per l’eventuale tracimamento dei contenuti.
Questa proprietà può assumere diversi valori:
- visible – tutto il contenuto resta visibile anche se eccede lo spazio a disposizione;
- hidden – il contenuto eccedente non viene mostrato;
- scroll – il contenuto è visibile utilizzando delle barre di scorrimento che vengono applicate dal browser (più o meno come accade per gli iframe);
- auto – il browser applica le sue regole di default (normalmente applica le barre di scorrimento).
Vediamo un esempio:
div.box {
width: 250px;
height: 250px;
/* nascondo i contenuti che eccedono lo spazio */
overflow: hidden;
}La proprietà overflow è spesso utilizzata, nel "webdesign moderno", per simulare i frame.
