Größenmessung

3.1 Eigenschaft width

Die Größen von Blöcken in CSS spielen eine wichtige Rolle beim Aufbau von Webseiten-Layouts. Sie bestimmen, wie Elemente angezeigt werden und mit umgebenden Elementen interagieren. Jetzt betrachten wir die Eigenschaften width, height, max-width und max-height, die es ermöglichen, Blockgrößen festzulegen.

Die Eigenschaft width legt die Breite eines Elements fest. Diese kann in verschiedenen Maßeinheiten angegeben werden, wie Pixel (px), Prozent (%), em, rem und andere.

Werte

• Automatischer Wert: auto — die Breite des Elements wird automatisch basierend auf seinem Inhalt und der Umgebung bestimmt
• Absolute Einheiten: px, pt, cm, mm, in und andere
• Relative Einheiten: %, em, rem, vw, vh und andere

Beispiel der Verwendung:

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

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Feste Breite (200px)</div>
      <div class="box box-percentage">Breite in Prozent (50%)</div>
    
  

Codeerklärung:

• .box-fixed: Element mit fester Breite von 200 Pixel
• .box-percentage: Element mit einer Breite von 50% des übergeordneten Elements

3.2 Eigenschaft height

Die Eigenschaft height legt die Höhe eines Elements fest. Sie kann ebenfalls in verschiedenen Maßeinheiten angegeben werden.

Werte:

• Automatischer Wert: auto — die Höhe des Elements wird automatisch basierend auf seinem Inhalt und der Umgebung bestimmt
• Absolute Einheiten: px, pt, cm, mm, in und andere
• Relative Einheiten: %, em, rem, vh, vw und andere

Beispiel der Verwendung:

    
      .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">Feste Höhe (150px)</div>
        <div class="box box-percentage-height">Höhe in Prozent (50%)</div>
      </div>
    
  

Codeerklärung:

• .box-fixed-height: Element mit einer festen Höhe von 150 Pixel
• .box-percentage-height: Element mit einer Höhe von 50% des übergeordneten Elements

3.3 Eigenschaft max-width

Die Eigenschaft max-width legt die maximale Breite eines Elements fest. Dies ist eine Begrenzung, die verhindert, dass das Element über einen bestimmten Wert hinaus wächst.

Werte:

• Keine Begrenzung: none — das Element kann sich auf jede Breite ausdehnen
• Absolute Einheiten: px, pt, cm, mm, in und andere
• Relative Einheiten: %, em, rem, vh, vw und andere

Beispiel der Verwendung:

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

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

    
      <div class="box">Breite 100% (Standard)</div>
      <div class="box box-max-width">Maximale Breite 300px</div>
    
  

Codeerklärung:

• .box-max-width: Element mit einer maximalen Breite von 300 Pixeln. Der Inhalt verhindert, dass das Element über 300 Pixel hinaus wächst

3.4 Eigenschaft max-height

Die Eigenschaft max-height legt die maximale Höhe eines Elements fest. Dies ist eine Begrenzung, die verhindert, dass das Element über einen bestimmten Wert hinaus wächst.

Werte:

• Keine Begrenzung: none — das Element kann sich auf jede Breite ausdehnen
• Absolute Einheiten: px, pt, cm, mm, in und andere
• Relative Einheiten: %, em, rem, vh, vw und andere

Beispiel der Verwendung:

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

    
      <div class="box">
        <p>Zusätzlicher Text zur Demonstration des Scrollens.<br>Zusätzlicher Text zur Demonstration des Scrollens.<br>Zusätzlicher Text zur Demonstration des Scrollens.</p>
      </div>
    
  

Codeerklärung:

• .box-max-height: Element mit einer maximalen Höhe von 100 Pixeln. Wenn der Inhalt des Elements diesen Wert überschreitet, wird er dank der Eigenschaft overflow: auto; gescrollt