<prozentual>

Der <percentage> CSS Datentyp repräsentiert einen prozentualen Wert. Er wird oft verwendet, um eine Größe relativ zu einem übergeordneten Element eines Objekts zu definieren. Zahlreiche Eigenschaften können Prozentsätze verwenden, wie zum Beispiel width, height, margin, padding und font-size.

Hinweis: Nur berechnete Werte können vererbt werden. Daher wird, selbst wenn ein prozentualer Wert für die übergeordnete Eigenschaft verwendet wird, ein reeller Wert (wie eine Breite in Pixeln für einen <length>-Wert) auf der vererbten Eigenschaft zugänglich sein, nicht der prozentuale Wert.

Syntax

Der <percentage>-Datentyp besteht aus einem <number>, gefolgt vom Prozentzeichen (%). Optional kann ihm ein einzelnes + oder - Zeichen vorangestellt werden, obwohl negative Werte nicht für alle Eigenschaften gültig sind. Wie bei allen CSS-Dimensionen gibt es keinen Leerraum zwischen dem Symbol und der Zahl.

Interpolation

Bei Animationen werden die Werte des <percentage>-Datentyps als reale, Gleitkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene Easing-Funktion bestimmt.

Beispiele

Breite und margin-left

html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

Das obige HTML führt zu folgender Ausgabe:

Font-size

html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

Das obige HTML führt zu folgender Ausgabe:

Spezifikationen

Specification
CSS Values and Units Module Level 4
# percentages

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch