Funzioni matematiche CSS

Le funzioni matematiche CSS permettono di utilizzare espressioni matematiche come valori degli attributi. Questo capitolo spiegherà calc(),max() E min() Funzione.

Funzione calc()

calc() La funzione esegue il calcolo e utilizza il risultato come valore dell'attributo.

Sintassi CSS

calc(expression)

Ecco un esempio:

Esempio

Usare calc() Calcola la larghezza dell'elemento <div>:

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

Prova personalmente

Funzione max()

max() La funzione utilizza il valore maggiore dell'elenco di valori separati da virgola come valore dell'attributo.

Sintassi CSS

max(value1, value2, ...)

Ecco un esempio:

Esempio

Usare max() Imposta la larghezza di #div1 al valore maggiore tra il 50% e 300px:

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

Prova personalmente

Funzione min()

min() La funzione min() utilizza il valore minore dell'elenco di valori separati da virgola come valore dell'attributo.

Sintassi CSS

min(value1, value2, ...)

Ecco un esempio:

Esempio

Usare min() Imposta la larghezza di #div1 al valore minore tra il 50% e 300px:

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

Prova personalmente

Manuale di riferimento delle funzioni CSS

Per ottenere l'elenco completo delle funzioni CSS, visitare il nostro Manuale di riferimento delle funzioni CSS.