<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 Objekt eines Elements zu definieren. Zahlreiche Eigenschaften können Prozentsätze verwenden, wie width, height, margin, padding und font-size.
Hinweis:
Nur berechnete Werte können vererbt werden. Auch wenn ein Prozentwert bei der übergeordneten Eigenschaft verwendet wird, ist ein tatsächlicher Wert (wie eine Breite in Pixeln für einen <length>-Wert) bei der vererbten Eigenschaft zugänglich, nicht der Prozentwert.
Syntax
Der <percentage>-Datentyp besteht aus einem <number>, gefolgt vom Prozentzeichen (%). Optional kann er von einem einzelnen +- 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
Bei Animationen werden 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 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 |