CSS wiskundige functies
Met de CSS-wiskundige functies kunnen wiskundige uitdrukkingen worden gebruikt als eigenschapswaarden. Hier zullen we de calc(),
max()en min()functies uitleggen.
De calc()-functie
De calc()functie voert een berekening uit die als eigenschapswaarde moet worden gebruikt.
CSS-syntaxis
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Laten we een voorbeeld bekijken:
Voorbeeld
Gebruik calc() om de breedte van een <div>-element te berekenen:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
De max()-functie
De max()functie gebruikt de grootste waarde, uit een door komma's gescheiden lijst met waarden, als de eigenschapswaarde.
CSS-syntaxis
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Laten we een voorbeeld bekijken:
Voorbeeld
Gebruik max() om de breedte van #div1 in te stellen op de grootste waarde, 50% of 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
De min()-functie
De min()functie gebruikt de kleinste waarde, uit een door komma's gescheiden lijst met waarden, als de eigenschapswaarde.
CSS-syntaxis
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Laten we een voorbeeld bekijken:
Voorbeeld
Gebruik min() om de breedte van #div1 in te stellen op de kleinste waarde, 50% of 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Alle CSS-wiskundige functies
| 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 |