diff options
| author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
| commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
| tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/de/web/css/calc() | |
| parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
| download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/de/web/css/calc()')
| -rw-r--r-- | files/de/web/css/calc()/index.html | 106 |
1 files changed, 0 insertions, 106 deletions
diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html deleted file mode 100644 index f8424ee032..0000000000 --- a/files/de/web/css/calc()/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -tags: - - CSS - - CSS Funktion - - Referenz -translation_of: Web/CSS/calc() ---- -<div>{{CSSRef}}</div> - -<h2 id="Übersicht">Übersicht</h2> - -<p>Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.</p> - -<p>calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.</p> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<pre class="syntaxbox notranslate">/* Eigenschaft: calc(<em>Ausdruck</em>) */ -width: calc(100% - 80px);</pre> - -<h3 id="Werte">Werte</h3> - -<dl> - <dt>Ausdruck</dt> - <dd>Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.</dd> -</dl> - -<h3 id="Ausdrücke">Ausdrücke</h3> - -<p>Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:</p> - -<dl> - <dt><strong>+</strong></dt> - <dd>Addition.</dd> - <dt><strong>-</strong></dt> - <dd>Subtraktion.</dd> - <dt><strong>*</strong></dt> - <dd>Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).</dd> - <dt><strong>/</strong></dt> - <dd>Division (Divisor muss eine {{cssxref("<number>")}} sein).</dd> -</dl> - -<p>Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.<br> - Das Setzen von Klammern ist ebenfalls möglich.</p> - -<p><code>calc()</code>-Funktionen können ineinander verschachtelt werden.</p> - -<div class="note"><strong>Hinweis:</strong> Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde <code>calc(50% -8px)</code> als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: <code>calc(50% - 8px)</code><br> -Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.</div> - -<div class="note">Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen <em>können</em> vom Browser als Wert <code>auto</code> behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.</div> - -<h2 id="Beispiele">Beispiele</h2> - -<h3 id="Relative_Größe_eines_Objekts_mit_einer_absoluten_Positionierung">Relative Größe eines Objekts mit einer absoluten Positionierung</h3> - -<p>Mit <code>calc()</code> ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.</p> - -<p>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.</p> - -<p>Links ist die Position mit <code>left: 40px</code> definiert. Mit <code>calc(100% - 80px)</code> werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.</p> - -<pre class="brush: css notranslate">.banner { - position: absolute; - left: 40px; - width: 90%; /* fallback for browsers without support for calc() */ - width: calc(100% - 80px); -} -</pre> - -<pre class="brush: html notranslate"><div class="banner">This is a banner!</div></pre> - -<p>{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}</p> - -<h2 id="Spezifikation">Spezifikation</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spezifikation</th> - <th scope="col">Status</th> - <th scope="col">Anmerkung</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browserkompatibilität">Browserkompatibilität</h2> - -<p>{{Compat("css.types.calc")}}</p> - -<h2 id="See_also" name="See_also">Siehe auch</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog"><u><font color="#0066cc">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</font></u></a></li> -</ul> |
