CSS -Mathematikfunktionen
Die mathematischen CSS-Funktionen ermöglichen die Verwendung mathematischer Ausdrücke als Eigenschaftswerte. Hier erklären wir die Funktionen calc(),
max()und min().
Die calc()-Funktion
Die calc()Funktion führt eine als Eigenschaftswert zu verwendende Berechnung durch.
CSS-Syntax
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Schauen wir uns ein Beispiel an:
Beispiel
Verwenden Sie calc(), um die Breite eines <div>-Elements zu berechnen:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Die max()-Funktion
Die max()Funktion verwendet den größten Wert aus einer durch Kommas getrennten Liste von Werten als Eigenschaftswert.
CSS-Syntax
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Schauen wir uns ein Beispiel an:
Beispiel
Verwenden Sie max(), um die Breite von #div1 auf den größten Wert einzustellen, 50 % oder 300 Pixel:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Die Funktion min()
Die min()Funktion verwendet den kleinsten Wert aus einer durch Kommas getrennten Liste von Werten als Eigenschaftswert.
CSS-Syntax
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Schauen wir uns ein Beispiel an:
Beispiel
Verwenden Sie min(), um die Breite von #div1 auf den kleinsten Wert einzustellen, 50 % oder 300 Pixel:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Alle CSS-Mathematikfunktionen
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |