La funzione `calc()` è un mezzo potente per creare layout dinamici e flessibili in CSS. Questa funzione ti permette di fare calcoli aritmetici semplici direttamente nei tuoi stili CSS.
Ecco un esempio base su come usare la funzione `calc()`:
```
.container{
width: calc(100% – 3em);
}
```
In questo esempio, il contenitore avrà una larghezza che corrisponderà al 100% della larghezza del suo elemento padre, meno 3em.
È possibile fare calcoli con qualsiasi tipo di unità di misura compatibile. È possibile, ad esempio, sommare percentuali con pixel o em, ecc.
Ecco un altro esempio:
```
.header {
height: calc(100vh – 100px);
}
```
In questo esempio, l’header avrà un’altezza uguale alla totalità dell’altezza della viewport (100vh), meno 100px. Questa può essere una soluzione utile quando si ha un layout fisso in cima o in fondo alla pagina.
È importante notare che la funzione `calc()` necessita di uno spazio tra l’operatore e i valori. Ad esempio `calc(50%-3em)` darà un errore mentre `calc(50% – 3em)` funzionerà correttamente.
I quattro operatori di base che possono essere utilizzati con la funzione `calc()` sono: `+` (addizione), `-` (sottrazione), `*` (moltiplicazione) e `/` (divisione). Puoi anche combinare più operatori in un’unica espressione, come in `calc(100% – 2em – 3px)`. Ricorda di utilizzare le parentesi dove necessario per specificare l’ordine delle operazioni.
