Misurazione delle Dimensioni

3.1 Proprietà width

Le dimensioni dei blocchi in CSS giocano un ruolo importante nella creazione dei layout delle pagine web. Determinano come gli elementi verranno visualizzati e come interagiranno con gli altri elementi circostanti. Ora esamineremo le proprietà width, height, max-width e max-height, che permettono di definire le dimensioni dei blocchi.

La proprietà width imposta la larghezza di un elemento. Può essere specificata in diverse unità di misura, come pixel (px), percentuali (%), em, rem e altre.

Valori

• Valore automatico: auto — la larghezza dell'elemento viene determinata automaticamente in base al suo contenuto e all'ambiente
• Unità assolute: px, pt, cm, mm, in e altre
• Unità relative: %, em, rem, vw, vh e altre

Esempio di utilizzo:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Larghezza fissa (200px)</div>
      <div class="box box-percentage">Larghezza in percentuale (50%)</div>
    
  

Spiegazione del codice:

• .box-fixed: elemento con larghezza fissa di 200 pixel
• .box-percentage: elemento con larghezza pari al 50% dell'elemento genitore

3.2 Proprietà height

La proprietà height imposta l'altezza di un elemento. Anche questa può essere specificata in diverse unità di misura.

Valori:

• Valore automatico: auto — l'altezza dell'elemento viene determinata automaticamente in base al suo contenuto e all'ambiente
• Unità assolute: px, pt, cm, mm, in e altre
• Unità relative: %, em, rem, vh, vw e altre

Esempio di utilizzo:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Altezza fissa (150px)</div>
        <div class="box box-percentage-height">Altezza in percentuale (50%)</div>
      </div>
    
  

Spiegazione del codice:

• .box-fixed-height: elemento con altezza fissa di 150 pixel
• .box-percentage-height: elemento con altezza pari al 50% dell'elemento genitore

3.3 Proprietà max-width

La proprietà max-width imposta la larghezza massima di un elemento. È una limitazione che impedisce all'elemento di superare un determinato valore.

Valori:

• Nessuna limitazione: none — l'elemento può estendersi fino a qualsiasi larghezza
• Unità assolute: px, pt, cm, mm, in e altre
• Unità relative: %, em, rem, vh, vw e altre

Esempio di utilizzo:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Larghezza 100% (di default)</div>
      <div class="box box-max-width">Larghezza massima 300px</div>
    
  

Spiegazione del codice:

• .box-max-width: elemento con larghezza massima di 300 pixel. Il contenuto non permetterà all'elemento di espandersi oltre i 300 pixel

3.4 Proprietà max-height

La proprietà max-height imposta l'altezza massima di un elemento. È una limitazione che impedisce all'elemento di superare un determinato valore.

Valori:

• Nessuna limitazione: none — l'elemento può estendersi fino a qualsiasi larghezza
• Unità assolute: px, pt, cm, mm, in e altre
• Unità relative: %, em, rem, vh, vw e altre

Esempio di utilizzo:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Testo aggiuntivo per la dimostrazione dello scorrimento.<br>Testo aggiuntivo per la dimostrazione dello scorrimento.<br>Testo aggiuntivo per la dimostrazione dello scorrimento.</p>
      </div>
    
  

Spiegazione del codice:

• .box-max-height: elemento con altezza massima di 100 pixel. Se il contenuto dell'elemento supera questo valore, verrà visualizzato con scrolling grazie alla proprietà overflow: auto;