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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
title: <percentage>
slug: Web/CSS/percentage
tags:
- CSS
- CSS Datentypen
- Layout
- Referenz
- Web
translation_of: Web/CSS/percentage
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Der <code><percentage></code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp repräsentiert einen Prozentwert. Viele <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaften</a> akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{cssxref("<number>")}} Wert unmittelbar gefolgt von einem Prozentzeichen <code>%</code> angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.</p>
<p>Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.</p>
<div class="note"><strong>Hinweis:</strong> Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{cssxref("<length>")}} Wert, verwendet, nicht der Prozentwert.</div>
<h2 id="Interpolation">Interpolation</h2>
<p>Werte des <code><percentage></code> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die <a href="/de/docs/Web/CSS/timing-function">Timingfunktion</a> bestimmt, die mit der Animation verbunden ist.</p>
<h2 id="Beispiele">Beispiele</h2>
<div id="Beispiel_1">
<pre class="brush: html"><div style="background-color:#0000FF;">
<div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
<div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
</div>
</pre>
</div>
<p>Ergibt:</p>
<p>{{ EmbedLiveSample('Beispiel_1','600','70') }}</p>
<div id="Beispiel_2">
<pre class="brush: html"><div style="font-size:18px;">
Text in Normalgröße (18px)
<span style="font-size:50%;">50%</span>
<span style="font-size:200%;">200%</span>
</div>
</pre>
</div>
<p>Ergibt:</p>
<p>{{ EmbedLiveSample('Beispiel_2','600','50') }}</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">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>Keine signifikante Änderung zu CSS Level 2 (Revision 1)</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Keine Änderung zu CSS Level 1</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.types.percentage")}}
|
