CSS Wiskundige Functies

CSS wiskundige functies stellen het gebruik van wiskundige expressies als eigenschapswaarden mogelijk. Dit hoofdstuk zal uitleggen calc(),max() en min() Functie.

calc() functie

calc() De functie voert een berekening uit en gebruikt het resultaat als eigenschapswaarde.

CSS Syntax

calc(expression)
Waarde Beschrijving
expression Verplicht. Wiskundige expressie. Het resultaat wordt als waarde gebruikt. U kunt de volgende operatoren gebruiken: +, -, *, /

Laten we een voorbeeld zien:

Voorbeeld

Gebruik calc() Bereken de breedte van het <div>-element:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
{}

Probeer het zelf

max() functie

max() De functie gebruikt de grootste waarde uit de komma-gescheiden waardenlijst als eigenschapswaarde.

CSS Syntax

max(value1, value2, ...)
Waarde Beschrijving
value1, value2, ... Verplicht. Lijst van komma-gescheiden waarden - kies de grootste waarde.

Laten we een voorbeeld zien:

Voorbeeld

Gebruik max() Stel de breedte van #div1 in op de grotere waarde tussen 50% of 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
{}

Probeer het zelf

min() functie

min() De functie gebruikt de kleinste waarde uit de komma-gescheiden lijst van waarden als waarde voor het kenmerk.

CSS Syntax

min(value1, value2, ...)
Waarde Beschrijving
value1, value2, ... Verplicht. Een komma-gescheiden lijst van waarden - kies de kleinste waarde

Laten we een voorbeeld zien:

Voorbeeld

Gebruik min() Stel de breedte van #div1 in op 50% of de kleinste waarde van 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
{}

Probeer het zelf

CSS functie referentie

Voor een volledige lijst van alle CSS functies, bezoek onze CSS functie referentiehandleiding.