<percentage>
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 Prozentwert. Er wird häufig verwendet, um eine Größe relativ zum übergeordneten Element festzulegen. Zahlreiche Eigenschaften können Prozentsätze verwenden, wie width
, height
, margin
, padding
, und font-size
.
Hinweis:
Nur berechnete Werte können vererbt werden. Daher wird, selbst wenn ein Prozentwert für die übergeordnete Eigenschaft verwendet wird, ein realer Wert (wie z. B. eine Breite in Pixeln für einen <length>
-Wert) auf der vererbten Eigenschaft zugänglich sein, nicht der Prozentwert.
Syntax
Der <percentage>
-Datentyp besteht aus einer <number>
gefolgt vom Prozentzeichen (%
). Optional kann diesem ein einzelnes +
oder -
Zeichen vorangestellt sein, obwohl negative Werte nicht für alle Eigenschaften gültig sind. Wie bei allen CSS-Dimensionen gibt es keinen Abstand zwischen dem Symbol und der Zahl.
Interpolation
Wenn Werte des <percentage>
-Datentyps animiert werden, werden sie als reale Gleitkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene Easing-Funktion bestimmt.
Beispiele
Width 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 ergibt:
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 ergibt:
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # percentages |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<percentage> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support