<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

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 ergibt:

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 ergibt:

Spezifikationen

Specification
CSS Values and Units Module Level 4
# percentages

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch