1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
---
title: Berechneter Wert
slug: Web/CSS/berechneter_Wert
tags:
- CSS
- Guide
- Web
translation_of: Web/CSS/computed_value
---
<div>
{{cssref}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Der <strong>berechnete Wert</strong> einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:</p>
<ul>
<li>Verarbeitung der speziellen Werte {{ cssxref("inherit") }} und {{ cssxref("initial") }} und</li>
<li>durch die Berechnung, die benötigt wird, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Übersicht der Eigenschaft beschrieben wird.</li>
</ul>
<p>Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in <code>em</code> Einheiten oder Prozentangaben) zu absoluten Werten.</p>
<p>Wenn zum Beispiel ein Element einen Wert <code>font-size:16px</code> und <code>padding-top:2em</code> definiert hat, dann ist der berechnete Wert von <code>padding-top</code> gleich <code>32px</code> (zweimal die Schriftgröße).</p>
<p>Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie <code>width</code>, <code>margin-right</code>, <code>text-indent</code> und <code>top</code>), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in <code>line-height</code> definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ermittelt wird.</p>
<p>Der Hauptnutzen des <em>berechneten Wertes</em> (außer als ein Schritt zwischen dem <a href="/de/docs/Web/CSS/angegebener_Wert" title="en/CSS/specified_value">angegebenen Wert</a> und dem <a href="/de/docs/Web/CSS/benutzter_Wert" title="en/CSS/used_value">benutzten Wert</a>) ist <a class="internal" href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">Vererbung</a> inklusive dem {{ cssxref("inherit") }} Schlüsselwort.</p>
<h2 id="Hinweis">Hinweis</h2>
<p>Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den <a href="/de/docs/Web/CSS/aufgelöster_Wert">aufgelösten Wert</a> zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ist.</p>
<h2 id="Spezifikation">Spezifikation</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#computed-value%20" title="http://www.w3.org/TR/CSS21/cascade.html#computed-value ">CSS 2.1 Assigning property values #computed-value </a></li>
</ul>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li>
<li>{{ CSS_key_concepts() }}</li>
</ul>
|
