Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<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>CSSDatentyp repräsentiert einen Prozentwert. Er wird oft verwendet, um eine Größe relativ zum übergeordneten Element zu definieren. Zahlreiche Eigenschaften können Prozentwerte verwenden, wiewidth,height,margin,padding, undfont-size.
Hinweis:Nur berechnete Werte können vererbt werden. Selbst wenn auf der übergeordneten Eigenschaft ein Prozentwert verwendet wird, ist auf der vererbten Eigenschaft ein realer Wert (wie z.B. eine Breite in Pixeln für einen<length> Wert) verfügbar und 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
Wenn animiert, werden Werte des<percentage> Datentyps als reelle, Gleitkommazahleninterpoliert. Die Geschwindigkeit der Interpolation wird von der mit der Animation verbundenenEasing-Funktion bestimmt.
Beispiele
Width und margin-left
<div> <div>Width: 50%, Left margin: 20%</div> <div>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;}Font-size
<div> <p>Full-size text (18px)</p> <p><span>50% (9px)</span></p> <p><span>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 |