De calc() functie in CSS wordt gebruikt om dynamische berekeningen uit te voeren voor een specifieke CSS eigenschap. Dit betekent dat je waarden kunt berekenen afhankelijk van andere eigenschappen, in plaats van ze handmatig in te voeren.
Hier is de algemene vorm van de vereiste syntax:
calc(expressie)Hier is een voorbeeld van hoe de calc-functie wordt gebruikt in CSS:
```
div {
width: calc(100% – 80px);
height: calc(50vh – 20px);
}
```
In het bovenstaande voorbeeld, zal de breedte van het div-element worden berekend als 100% van de container breedte min 80 pixels. De hoogte van het div-element zal worden berekend als 50% van de viewport hoogte min 20 pixels.
Het is belangrijk om op te merken dat je whitespaces rond de operators in de calc() functie nodig hebt (zoals +, -, \* en /), anders zal de berekening niet worden uitgevoerd. Verder kun je verschillende soorten waarden combineren in de expressie als pixels, percentages, viewport units, enz.
Hier zijn enkele operators die je kunt gebruiken binnen de calc() functie:
1. + (addition)
2. – (subtraction)
3. \* (multiplication)
4. / (division)
