CSS-Mathefunktionen

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Die CSS-Mathefunktionen ermöglichen die Erstellung mathematischer Ausdrücke als Eigenschaftswerte verwendet. Hier erklären wir calc(), max()- und min()-Funktionen.

Die Funktion calc()

Die Funktion calc() führt eine Berechnung durch, die als Eigenschaftswert verwendet wird.

CSS-Syntax

calc(expression)
expression

Erforderlich. Ein mathematischer Ausdruck. Das Ergebnis wird als Wert verwendet.
Die folgenden Operatoren können verwendet werden: + - * /

Schauen wir uns ein Beispiel an:

Beispiel

Verwenden Sie calc(), um die Breite eines <div>-Elements zu berechnen:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

Die Funktion max()

Die Funktion max() verwendet den größten Wert, aus einer durch Kommas getrennten Werteliste als Eigenschaftswert.

CSS-Syntax

 max(value1, value2, ...)
value1, value2, ...

Erforderlich. Eine Liste durch Kommas getrennter Werte - wobei der größte Wert steht gewählt

Schauen wir uns ein Beispiel an:

Beispiel

Verwenden Sie max(), um die Breite von #div1 auf den größten Wert festzulegen, 50 % oder 300px:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

Die Funktion min()

Die Funktion min() verwendet den kleinsten Wert, aus einer durch Kommas getrennten Werteliste als Eigenschaftswert.

CSS-Syntax

 min(value1, value2, ...)
value1, value2, ...

Erforderlich. Eine Liste durch Kommas getrennter Werte - wobei der kleinste Wert steht gewählt

Schauen wir uns ein Beispiel an:

Beispiel

Verwenden Sie min(), um die Breite von #div1 auf den kleinsten Wert festzulegen, 50 % oder 300px:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

Alle CSS-Mathefunktionen

calc()

Ermöglicht die Durchführung von Berechnungen zur Bestimmung von CSS-Eigenschaftswerten

max()

Verwendet den größten Wert aus einer durch Kommas getrennten Werteliste als Eigentumswert

min()

Verwendet den kleinsten Wert aus einer durch Kommas getrennten Werteliste als Eigentumswert