calc() per calcoli dinamici
Combini unità ed esegua operazioni aritmetiche in CSS usando la funzione calc() per ottenere valori dinamici.
calc() per calcoli dinamici è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è calc()?
calc() consente di eseguire operazioni aritmetiche direttamente nei valori delle proprietà CSS. È possibile combinare unità diverse (px, %, rem, vw) in un unico calcolo.
Sintassi di base di calc()
Supporta addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/). Gli spazi intorno agli operatori + e - sono obbligatori.
<div class="sidebar">Sidebar (100% - 240px)</div>Combinare le unità
Il vero punto di forza di calc() è la possibilità di combinare unità incompatibili, che altrimenti non si potrebbero mescolare:
<div class="hero">Hero</div>
<div class="column">Column</div>calc() con le variabili CSS
Combini calc() con le proprietà personalizzate CSS per creare token di design dinamici:
<div class="main">Main content</div>calc() annidato
calc() può essere annidato, anche se raramente è necessario, poiché ogni contesto esegue già il proprio calcolo:
<div class="element">Element</div>calc() per una tipografia fluida
Utilizzi calc() per creare un'interpolazione lineare tra due dimensioni:
<h1>Fluid Heading</h1>Divisione in calc()
Per la divisione, il divisore deve essere un numero privo di unità:
<div class="thirds">Third width</div>calc() con Grid e Flexbox
È utile nelle definizioni delle tracce e in flex-basis:
<div class="grid"><div>A</div><div>B</div></div>calc() a confronto con le altre funzioni
Quando utilizzare ciascuna funzione:
calc(): operazioni aritmetiche arbitrarie, soprattutto per combinare unitàmin()/max(): selezionare l'opzione più piccola o più grandeclamp(): mantenere un valore fluido tra un minimo e un massimo
Supporto dei browser
calc() è supportato da tutti i browser moderni e da IE11. È una delle funzioni CSS con il supporto più esteso. È possibile utilizzarlo senza fallback in qualsiasi progetto moderno.
Pattern comuni con calc()
Ecco alcuni pattern pratici che utilizzerà spesso:
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>Verifica rapida
Quale espressione calc() produce il risultato corretto per "il 30% del genitore meno 20px"?
Riepilogo
calc() consente di eseguire operazioni aritmetiche in CSS usando unità miste. Permette di creare layout dinamici, come "l'intera viewport meno un'intestazione di altezza fissa", e di interpolare la tipografia fluida. Gli spazi intorno agli operatori + e - sono obbligatori. Lo combini con le variabili CSS per eseguire calcoli potenti sui token di design. Lo utilizzi insieme a min/max/clamp per controllare completamente le dimensioni fluide.
Domande Frequenti
La lezione «calc() per calcoli dinamici» è gratuita?
Sì — il testo completo di «calc() per calcoli dinamici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «calc() per calcoli dinamici»?
Combini unità ed esegua operazioni aritmetiche in CSS usando la funzione calc() per ottenere valori dinamici. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «calc() per calcoli dinamici»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- calc() per calcoli dinamici
- min(), max() e clamp() per valori fluidi
- repeat() e minmax() in Grid
- color-mix() e sintassi dei colori relativi