<prozentual>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
<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
<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