From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/calc()/index.html | 106 +++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/de/web/css/calc()/index.html (limited to 'files/de/web/css/calc()/index.html') diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html new file mode 100644 index 0000000000..357b7d1036 --- /dev/null +++ b/files/de/web/css/calc()/index.html @@ -0,0 +1,106 @@ +--- +title: calc +slug: Web/CSS/calc() +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

+ +

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

+ +

Syntax

+ +
{{csssyntax}}
+ +
/* Eigenschaft: calc(Ausdruck) */
+width: calc(100% - 80px);
+ +

Werte

+ +
+
Ausdruck
+
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
+
+ +

Ausdrücke

+ +

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+ +
+
+
+
Addition.
+
-
+
Subtraktion.
+
*
+
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
+
/
+
Division (Divisor muss eine {{cssxref("<number>")}} sein).
+
+ +

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
+ Das Setzen von Klammern ist ebenfalls möglich.

+ +

calc()-Funktionen können ineinander verschachtelt werden.

+ +
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
+ +
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
+ +

Beispiele

+ +

Relative Größe eines Objekts mit einer absoluten Positionierung

+ +

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

+ +

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

+ +

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.types.calc")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf