<percentage>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Er wird häufig verwendet, um eine Größe relativ zum übergeordneten Element zu definieren. Zahlreiche Eigenschaften können Prozentsätze nutzen, wie width, height, margin, padding und font-size.
Hinweis:
Nur berechnete Werte können vererbt werden. Selbst wenn ein Prozentwert auf der übergeordneten Eigenschaft verwendet wird, wird ein realer Wert (wie eine Breite in Pixeln für einen <length>-Wert) bei der vererbten Eigenschaft zugänglich sein, nicht der Prozentwert.
Syntax
Der <percentage>-Datentyp besteht aus einer <number> gefolgt vom Prozentzeichen (%). Optional kann ihm ein einzelnes + oder - vorangestellt werden, 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
Bei Animationen werden Werte des <percentage>-Datentyps als reelle, Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verknüpfte Easing-Funktion bestimmt.
Beispiele
Breite und margin-left
<div class="container">
<div class="box1">Width: 50%, Left margin: 20%</div>
<div class="box2">Width: 30%, Left margin: 60%</div>
</div>
.container {
background-color: navy;
}
.box1 {
width: 50%;
margin-left: 20%;
background-color: chartreuse;
}
.box2 {
width: 30%;
margin-left: 60%;
background-color: pink;
}
Schriftgröße
<div class="container">
<p>Full-size text (18px)</p>
<p><span class="half">50% (9px)</span></p>
<p><span class="double">200% (36px)</span></p>
</div>
.container {
font-size: 18px;
}
.half {
font-size: 50%;
}
.double {
font-size: 200%;
}
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # percentages |
Browser-Kompatibilität
Loading…