CSS Dimension (Dimensione)

Le proprietà dimensioni CSS, utilizzate per controllare l'altezza e la larghezza degli elementi.

Proprietà dimensioni CSS

CSS fornisce diversi attributi come width, height, max-width e max-height, che ti permettono di determinare le dimensioni del Box (scatola). La prossima sezione introdurrà come utilizzare questi attributi per creare una migliore布局 del sito web.

Proprietà larghezza (Width) e altezza (Height)

Le proprietà width e height definiscono la larghezza e l'altezza dell'area di contenuto di un elemento. Questa larghezza e altezza non includono il riempimento, i bordi o i margini. VediModello di scatola CSS, 　 per comprendere come calcolare la larghezza e l'altezza effettive.

Le proprietà width e height possono accettare valori di lunghezza (come px, pt, em, ecc.), unPercentualeo alla parola chiave 'auto'. Non sono ammessi valori di lunghezza negativi.

div　{
　　　　width:　300px;
　　　　height: 200px;
}

Questa regola di stile assegna una larghezza fissa di 300 pixel e un'altezza di 200 pixel a<div>elemento.

Attributo max-height altezza massima

L'attributo max-height consente di specificare l'altezza massima del contenuto della scatola. Questa altezza massima non include il riempimento, i bordi o i margini.

L'attributo max-height, anche se l'attributo height è impostato a un valore maggiore, l'elemento applicato non sarà mai più alto del valore specificato. Ad esempio, se si imposta height a 200px e max-height a 100px, l'altezza effettiva dell'elemento sarà di 100px.

div　{
　　　　height: 200px;
　　　　max-height: 100px;
}

L'attributo max-height viene solitamente utilizzato insieme all'attributo min-height per determinare l'intervallo di altezza dell'elemento.

Attributo min-height altezza minima

L'attributo min-height consente di specificare l'altezza minima del contenuto del blocco. Questa altezza minima non include il riempimento, i bordi o i margini.

L'elemento applicato a min-height non sarà mai inferiore all'altezza minima specificata. Ad esempio, se si imposta height a 200px e min-height a 300px, l'altezza effettiva dell'elemento sarà di 300px.

div　{
　　　　height: 200px;
　　　　min-height: 300px;
}

L'attributo min-height viene solitamente utilizzato insieme all'attributo max-height per controllare la gamma di altezza dell'elemento.

Attributo max-width della larghezza massima

L'attributo max-width ti permette di specificare la larghezza massima del contenuto del blocco. Questa larghezza massima non include il riempimento, i bordi o i margini.

L'elemento a cui viene applicato max-width non sarà mai più largo del valore specificato, anche se l'attributo width viene impostato a un valore maggiore. Ad esempio, se il width è impostato a 300px e il max-width a 200px, la larghezza effettiva dell'elemento sarà di 200px.

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

L'attributo max-width viene solitamente utilizzato insieme all'attributo min-width per produrre informazioni sulla gamma di larghezza dell'elemento.

Attributo min-width della larghezza minima

L'attributo min-width ti permette di specificare la larghezza minima del contenuto del blocco. Questa larghezza minima non include il riempimento, i bordi o i margini.

L'elemento a cui viene applicato min-width non sarà mai più stretto della larghezza minima specificata. Ad esempio, se il width è impostato a 300px e il min-width a 400px, la larghezza effettiva dell'elemento sarà di 400px.

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

L'attributo min-width viene solitamente utilizzato insieme all'attributo max-width per produrre informazioni sulla gamma di larghezza dell'elemento.