CSS matematiska funktioner

CSS matematiska funktioner tillåter att använda matematiska uttryck som egenskapsvärden. Detta kapitel kommer att förklara calc(),max() Och min() Funktion.

calc() funktionen

calc() Funktionen utför beräkningen och använder resultatet som egenskapsvärde.

CSS syntax

calc(expression)
Värde Beskrivning
expression Obligatorisk. Matematiskt uttryck. Resultatet används som värde. Följande operatorer kan användas: +, -, *, /

Låt oss se ett exempel:

Exempel

Använd calc() Beräkna bredden på <div>-elementet:

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

Prova själv

max() funktionen

max() Funktionen använder det största värdet från en kommatecknad värdefördelning som egenskapsvärde.

CSS syntax

max(value1, value2, ...)
Värde Beskrivning
value1, value2, ... Obligatorisk. En kommatecknad värdefördelning - välj det största värdet.

Låt oss se ett exempel:

Exempel

Använd max() Ställ in bredden på #div1 till det största värdet mellan 50% och 300px:

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

Prova själv

min() funktion

min() Funktionen använder den minsta värdet från en komma-separerad värde lista som egenskapsvärde.

CSS syntax

min(value1, value2, ...)
Värde Beskrivning
value1, value2, ... Obligatorisk. En komma-separerad värde lista - välj det minsta värdet

Låt oss se ett exempel:

Exempel

Använd min() Ställ in bredden på #div1 till 50% eller det minsta värdet av 300px:

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

Prova själv

CSS funktion referens

För en fullständig lista över alla CSS-funktioner, besök vår CSS funktion referenshandbok.