<length-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 <length-percentage> CSS Datentyp repräsentiert einen Wert, der entweder eine <length> oder ein <percentage> sein kann.
Syntax
Bitte konsultieren Sie die Dokumentation zu <length> und <percentage> für Details zu den einzelnen Syntaxen, die von diesem Typ erlaubt sind.
Formale Syntax
<length-percentage> =
<length> |
<percentage>
Beispiele
Beispiele für length-percentage
Dieses Beispiel demonstriert mehrere Eigenschaften, die <length-percentage> Werte verwenden.
HTML
<p>You can use percentages and lengths in so many places.</p>
CSS
p {
/* length-percentage examples */
width: 75%;
height: 200px;
margin: 3rem;
padding: 1%;
border-radius: 10px 10%;
font-size: 250%;
line-height: 1.5em;
/* length examples */
text-shadow: 1px 1px 1px red;
border: 5px solid red;
letter-spacing: 3px;
/* percentage example */
text-size-adjust: 20%;
}
Ergebnis
Verwendung in calc()
Wenn ein <length-percentage> als erlaubter Typ angegeben ist, bedeutet dies, dass der Prozentsatz auf eine Länge aufgelöst wird und daher in einem calc() Ausdruck verwendet werden kann. Daher sind alle folgenden Werte für width akzeptabel:
width: 200px;
width: 20%;
width: calc(100% - 200px);
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # mixed-percentages |
Browser-Kompatibilität
Loading…