Der<calc-sum>CSSDatentyp repräsentiert einen Ausdruck, der eine Berechnung in einer beliebigenCSS-Mathematikfunktion durchführt. Der Ausdruck führt eine grundlegende arithmetische Operation der Addition und Subtraktion zwischen zwei Werten aus.

Syntax

Der<calc-sum> Typ definiert zwei numerische Werte und einen der folgendenarithmetischen Operatoren zwischen ihnen.

+

Addiert zwei Zahlen.

-

Subtrahiert die rechte Zahl von der linken.

Formale Syntax

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Beschreibung

Die Operanden im Ausdruck können jeden Wert im<length>-Syntaxformat annehmen. Sie können<length>,<frequency>,<angle>,<time>,<percentage>,<number> oder<integer> verwenden.

Die Typen der beiden Operanden müssen übereinstimmen. Bei Längenangaben können Sie nicht0 verwenden, um0px (oder eine andere Längeneinheit) zu bedeuten. Stattdessen müssen Sie eine explizite Einheit hinzufügen:margin-top: calc(0px + 20px); ist gültig, währendmargin-top: calc(0 + 20px); ungültig ist. Prozentwerttypen werden basierend auf dem Kontext aufgelöst. Zum Beispiel istmargin-top: calc(50% + 20px); gültig, weilmargin-top Prozentwerte in Längen auflöst.

Das Einfügen vonCSS-Variablen incalc-sum-Ausdrücke ist ebenfalls erlaubt. Der folgende Codecalc(10px + var(--variable)), ist ein gültiger Ausdruck.

Die+ und- Operatorenmüssen vonLeerzeichen umgeben sein. Zum Beispiel wirdcalc(50% -8px) als "ein Prozentwert gefolgt von einer negativen Länge" interpretiert — was ein ungültiger Ausdruck ist — währendcalc(50% - 8px) als "ein Prozentwert gefolgt von einem Subtraktionsoperator und einer Länge" verstanden wird. Ebenso wirdcalc(8px + -50%) als "eine Länge gefolgt von einem Additionsoperator und einem negativen Prozentwert" behandelt.

Spezifikationen

Siehe auch

• <calc-product>
• <calc-value>
• <calc-keyword>