CSS-Mathematische Funktionen

CSS mathematical functions allow mathematical expressions to be used as attribute values. This chapter will explain calc(),max() And min() Function.

calc() function

calc() The function performs the calculation and uses the result as the attribute value.

CSS-Syntax

calc(expression)
Wert Beschreibung
expression Required. Mathematical expression. The result will be used as the value. The following operators can be used: +, -, *, /

Lassen Sie uns ein Beispiel betrachten:

Beispiel

Verwenden Sie calc() Calculate the width of the <div> element:

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

Probieren Sie es selbst aus

max() function

max() The function uses the largest value from the comma-separated list of values as the attribute value.

CSS-Syntax

max(value1, value2, ...)
Wert Beschreibung
value1, value2, ... Required. A comma-separated list of values - select the largest value.

Lassen Sie uns ein Beispiel betrachten:

Beispiel

Verwenden Sie max() Set the width of #div1 to the larger of 50% or 300px:

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

Probieren Sie es selbst aus

min() Funktion

min() Die Funktion verwendet den kleinsten Wert aus der durch Kommas getrennten Werteliste als Attributswert.

CSS-Syntax

min(value1, value2, ...)
Wert Beschreibung
value1, value2, ... Notwendig. Eine durch Kommas getrennte Werteliste - wählen Sie den kleinsten Wert

Lassen Sie uns ein Beispiel betrachten:

Beispiel

Verwenden Sie min() Setzen Sie die Breite von #div1 auf den kleineren Wert von 50% oder 300px:

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

Probieren Sie es selbst aus

CSS Funktionen Referenz

Für eine vollständige Liste aller CSS-Funktionen besuchen Sie bitte unsere CSS Funktionen Referenzhandbuch.