Le funzioni matematiche CSS consentono di utilizzare espressioni matematiche come valori di proprietà. Qui spiegheremo le funzioni calc(), max() e min().

La funzione calc()

La funzione calc() esegue un calcolo da utilizzare come valore della proprietà.

Sintassi CSS

calc(expression)

Esempio

Utilizzare calc() per calcolare la larghezza di un elemento <div>:

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

Visualizza esempio

La funzione max()

La funzione max() utilizza il valore più grande, da un elenco di valori separati da virgole, come valore della proprietà.

Sintassi CSS

max(valore1, valore2, ...)

Esempio

Utilizza max() per impostare la larghezza di #div1 su qualunque valore sia maggiore, 50% o 300px:

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

Visualizza esempio

La funzione min()

La funzione min() utilizza il valore più piccolo, da un elenco di valori separati da virgole, come valore della proprietà.

Sintassi CSS

min(valore1, valore2, ...)

Esempio

Utilizza min() per impostare la larghezza di #div1 su qualunque valore sia più piccolo, 50% o 300px:

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

Visualizza esempio

Tutte le funzioni matematiche CSS