CSS Academy · leksjon

calc() for dynamiske beregninger

Kombiner enheter og utfør aritmetikk i CSS med calc()-funksjonen for dynamiske verdier.

Leksjon 1 av 413 trinn

calc() for dynamiske beregninger er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er calc()?

calc() lar Dem utføre aritmetikk direkte i CSS-egenskapsverdier. De kan blande ulike enheter (px, %, rem, vw) i én og samme beregning.

Grunnleggende calc()-syntaks

Støtter addisjon (+), subtraksjon (-), multiplikasjon (*) og divisjon (/). Det kreves mellomrom rundt operatorene + og -.

  <div class="sidebar">Sidebar (100% - 240px)</div>

Blanding av enheter

Det kraftigste ved calc() er at De kan kombinere inkompatible enheter som ellers ville vært umulige å blande:

  <div class="hero">Hero</div>
  <div class="column">Column</div>

calc() med CSS-variabler

Kombiner calc() med CSS-egendefinerte egenskaper for dynamiske designtoken:

  <div class="main">Main content</div>

Nestet calc()

calc() kan nøstes, selv om det sjelden er nødvendig siden hver kontekst allerede evaluerer matematikken:

  <div class="element">Element</div>

calc() for flytende typografi

Bruk calc() til å opprette en lineær interpolasjon mellom to størrelser:

  <h1>Fluid Heading</h1>

Divisjon i calc()

Ved divisjon må divisoren være et tall uten enhet:

  <div class="thirds">Third width</div>

calc() med Grid og Flexbox

Nyttig i spordefinisjoner og flex-basis:

  <div class="grid"><div>A</div><div>B</div></div>

calc() sammenlignet med andre funksjoner

Når bør De bruke hva:

calc(): vilkårlig aritmetikk, spesielt ved blanding av enheter
min()/max(): velg det minste eller største alternativet
clamp(): begrens en flytende verdi mellom en minimums- og maksimumsverdi

Nettleserstøtte

calc() støttes i alle moderne nettlesere og IE11. Det er en av CSS-funksjonene med bredest støtte. Den kan trygt brukes uten reserveverdier i alle moderne prosjekter.

Vanlige calc()-mønstre

Praktiske mønstre De vil bruke gjentatte ganger:

  <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>

Rask kontroll

Hvilket calc()-uttrykk gir riktig resultat for «30 % av den overordnede bredden minus 20 px»?

Besvar den i den interaktive leksjonen

Oppsummering

calc() muliggjør aritmetikk i CSS med blandede enheter. Det brukes til dynamiske oppsett som «hele visningsområdet minus en fast topptekst» og interpolasjon for flytende typografi. Det kreves mellomrom rundt operatorene + og -. Kombiner det med CSS-variabler for kraftige beregninger med designtoken. Bruk det sammen med min/max/clamp for full kontroll over flytende størrelser.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «calc() for dynamiske beregninger» gratis?

Ja – hele teksten i «calc() for dynamiske beregninger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «calc() for dynamiske beregninger»?

Kombiner enheter og utfør aritmetikk i CSS med calc()-funksjonen for dynamiske verdier. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «calc() for dynamiske beregninger»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

calc() for dynamiske beregninger
min(), max() og clamp() for flytende verdier
repeat() og minmax() i Grid
color-mix() og relativ fargesyntaks

← Tilbake til CSS Academy