<percentage> CSS-Typ
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Er wird oft verwendet, um eine Größe relativ zum übergeordneten Objekt eines Elements 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 bei Verwendung eines Prozentwerts bei der übergeordneten Eigenschaft 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 ein einfaches +- oder --Zeichen 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
Wenn animiert, werden Werte des <percentage>-Datentyps als reale, Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene 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
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # percentages |