Funzioni matematiche CSS
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 calc()funzione esegue un calcolo da utilizzare come valore della proprietà.
Sintassi CSS
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Vediamo un esempio:
Esempio
Usa 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;
}
La funzione max()
La max()funzione utilizza il valore più grande, da un elenco di valori separati da virgole, come valore della proprietà.
Sintassi CSS
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Vediamo un esempio:
Esempio
Usa max() per impostare la larghezza di #div1 su qualsiasi valore sia più grande, 50% o 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
La funzione min()
La min()funzione utilizza il valore più piccolo, da un elenco di valori separati da virgole, come valore della proprietà.
Sintassi CSS
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Vediamo un esempio:
Esempio
Usa min() per impostare la larghezza di #div1 sul valore più piccolo, 50% o 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Tutte le funzioni matematiche CSS
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |