CSS mathematical function

CSS matematiske funktioner tillader brug af matematiske udtryk som egenskabsværdier. Dette kapitel vil forklare calc(),max() og min() Funktion.

calc() funktionen

calc() Funktionen udfører beregningen og bruger resultatet som egenskabsværdi.

CSS syntax

calc(expression)
Værdi Beskrivelse
expression Obligatorisk. Matematisk udtryk. Resultatet bruges som værdi. Følgende operatorer kan bruges: +, -, *, /

Lad os se et eksempel:

Eksempel

Brug calc() Beregn bredden af <div>-elementet:

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

Prøv det selv

max() funktionen

max() Funktionen bruger den største værdi fra en komma-separeret værdiliste som egenskabsværdi.

CSS syntax

max(value1, value2, ...)
Værdi Beskrivelse
value1, value2, ... Obligatorisk. En komma-separeret værdiliste - vælg den største værdi.

Lad os se et eksempel:

Eksempel

Brug max() Sæt bredden på #div1 til størst af 50% eller 300px:

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

Prøv det selv

min() funktion

min() Funktionen bruger den mindste værdi fra en komma-separeret værdiliste som egenskabsværdi.

CSS syntax

min(value1, value2, ...)
Værdi Beskrivelse
value1, value2, ... Obligatorisk. En komma-separeret værdiliste - vælg den mindste værdi

Lad os se et eksempel:

Eksempel

Brug min() Sæt bredden på #div1 til 50% eller den mindste værdi af 300px:

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

Prøv det selv

CSS funktion reference

For at få en fuld liste over alle CSS funktioner, besøg vores CSS funktion referencehåndbog.