0Pricing
CSS Academy · Lektion

calc() für dynamische Berechnungen

Kombinieren Sie Einheiten und führen Sie mit der Funktion calc() arithmetische Berechnungen für dynamische Werte durch.

calc() für dynamische Berechnungen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist calc()?

Mit calc() können Sie direkt in CSS-Eigenschaftswerten arithmetische Berechnungen durchführen. Sie können verschiedene Einheiten (px, %, rem, vw) in einer einzigen Berechnung kombinieren.

Grundlegende calc()-Syntax

Unterstützt Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Um die Operatoren + und - sind Leerzeichen erforderlich.

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

Einheiten kombinieren

Die besondere Stärke von calc() ist, inkompatible Einheiten zu kombinieren, die sich sonst nicht mischen ließen:

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

calc() mit CSS-Variablen

Kombinieren Sie calc() mit benutzerdefinierten CSS-Eigenschaften für dynamische Design-Tokens:

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

Verschachteltes calc()

calc() kann verschachtelt werden, ist aber selten nötig, da jeder Kontext die Berechnung bereits auswertet:

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

calc() für fließende Typografie

Verwenden Sie calc(), um eine lineare Interpolation zwischen zwei Größen zu erstellen:

  <h1>Fluid Heading</h1>

Division in calc()

Bei der Division muss der Divisor eine Zahl ohne Einheit sein:

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

calc() mit Grid und Flexbox

Nützlich innerhalb von Track-Definitionen und bei flex-basis:

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

calc() im Vergleich zu anderen Funktionen

Wann welche Funktion verwendet wird:

  • calc(): beliebige arithmetische Berechnungen, insbesondere zum Kombinieren von Einheiten
  • min()/max(): die kleinere oder größere Option auswählen
  • clamp(): einen fließenden Wert zwischen Minimum und Maximum begrenzen

Browser-Unterstützung

calc() wird von allen modernen Browsern und IE11 unterstützt. Es ist eine der am breitesten unterstützten CSS-Funktionen. In jedem modernen Projekt kann die Funktion ohne Fallbacks sicher verwendet werden.

Häufige calc()-Muster

Praktische Muster, die Sie immer wieder verwenden werden:

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

Kurzer Test

Welcher calc()-Ausdruck liefert das korrekte Ergebnis für „30 % des übergeordneten Elements minus 20 px“?

Zusammenfassung

calc() ermöglicht arithmetische Berechnungen in CSS mit gemischten Einheiten. Damit lassen sich dynamische Layouts wie „vollständiger Viewport minus feste Kopfzeile“ und fließende Interpolationen für Typografie erstellen. Um die Operatoren + und - sind Leerzeichen erforderlich. Kombinieren Sie calc() mit CSS-Variablen für leistungsfähige Berechnungen mit Design-Tokens. Verwenden Sie die Funktion zusammen mit min/max/clamp für eine vollständige Kontrolle über fließende Größen.

Häufig gestellte Fragen

Ist die Lektion „calc() für dynamische Berechnungen“ kostenlos?

Ja — der vollständige Text von „calc() für dynamische Berechnungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „calc() für dynamische Berechnungen“?

Kombinieren Sie Einheiten und führen Sie mit der Funktion calc() arithmetische Berechnungen für dynamische Werte durch. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „calc() für dynamische Berechnungen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. calc() für dynamische Berechnungen
  2. min(), max() und clamp() für fließende Werte
  3. repeat() und minmax() in Grid
  4. color-mix() und relative Farbsyntax
← Zurück zu CSS Academy