Le dimensioni (altezza e larghezza)

L’altezza e la larghezza di un qualsiasi box model sono definite rispettivamente dalle proprietà height e width. Il loro valore di default è auto, e quindi più testo è contenuto nel box e più esso si estende.

height

La proprietà height definisce la distanza tra il bordo superiore e quello inferiore dell’elemento, non è una proprietà ereditata, i valori ammessi sono:

• unità di misura
• percentuale: Si riferisce all’altezza del contenitore se quest’ultimo ha già un’altezza dichiarata altrimenti si comporta come il valore auto.
• auto: Valore di default

div{height:688px;}

se il contenuto del box supera l’altezza impostata nella proprietà height si possono avere problemi di visualizzazione, nel caso di firefox ad esempio, il testo si estende verticalmente e si sovrappone agli altri elementi, per ovviare a questo problema possiamo utilizzare la proprietà overflow.

Questa proprietà non è ereditata e può essere applicata a tutti gli elementi di blocco, i suoi possibili valori sono:

• visible: Il contenuto in eccesso và a sovrapporsi agli elementi posti successivamente
• hidden: Il testo in eccesso non viene mostrato
• scroll: vengono create delle barre di scorrimento per fare in modo che il contenuto possa essere visualizzato
• auto: il comportamento del browser dipende dalle sue impostazioni

div{height:150px; overflow:hidden;}

Ci sono altre due proprietà che consentono di definire un massimo o un minimo valore di altezza dell’elemento, max-height (altezza massima) e min-height (altezza minima), non sono ereditate ma purtroppo non sono supportate da Internet Explorer . Tali proprietà possono essere applicate a tutti gli elementi  tranne che a quelli di tabelle ed agli elementi in linea non rimpiazzati. I loro valori possono essere espressi con un’unità di misura oppure con la percentuale, il valore di default è auto.

div{min-height:100px;}

width

La proprietà width, non definisce la larghezza complessiva del box model, ma solo la larghezza dell’area dei contenuti, la larghezza totale invece è data dalla somma di alcuni valori:
margin-left + border-left +padding-left + width + padding-right + border-right + margin-right
Bisogna sapere che Internet Explorer  fino alla sua verrsione 5.5 interpreta la proprietà width in maniera diversa, cioè come la somma totale di bordi, margini, padding e contenuto. La proprietà width può essere applicata a tutti gli elementi di blocco e non è ereditata, essa può essere dichiarata utilizzando i seguenti valori:

• unità di misura
• auto: E’ il valore di default, la larghezza dell’elemento è uguale all’area del contenuto dell’elemento contenitore, ma solo nel caso in cui non siano stati impostati margini, bordi e padding.
• percentuale:  In base alla larghezza dell’elemento contenitore, ma solo nel caso in cui quest’ultimo abbia già un’altezza dichiarata altrimenti si comporta come il valore auto.

div{width:100px;}

Nel caso in cui si vogliano impostare una larghezza minima ed una larghezza massima dell’elemento si possono utilizzare le proprietà min-width (larghezza minima) e max-width (larghezza massima), tali proprietà possono essere applicate a tutti gli elementi tranne che a quelli di tabelle ed agli elementi in linea non rimpiazzati. I valori di queste proprietà possono essere espressi con unità di misura, percentuale o tramite la parola chiave auto che è il valore di default.

Popularity: 17% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback