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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
- CSS
- CSS Eigenschaft
- Experimentell
- Referenz
translation_of: Web/CSS/box-sizing
---
<div>
<p>{{CSSRef}}</p>
<p><span class="seoSummary">Die <a href="/en-US/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>box-sizing</code></strong> </span>legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.</p>
<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
<p>Im <a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">CSS box model</a> wird die Breite <code>width</code> und die Höhe <code>height</code>, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen <code>border</code> oder Innenabstände <code>padding</code> verfügt, wird diese zu der Breite <code>width</code> und Höhe <code>height</code> hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite <code>width</code> und Höhe <code>height</code> den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite <code>width: 25%;</code> haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.</p>
<p>Die <code>box-sizing</code> Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:</p>
<ul>
<li><code>content-box</code> gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.</li>
<li><code>border-box</code>
<p>weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.</p>
</li>
</ul>
<div class="blockIndicator note">
<p><strong>Hinweis:</strong> Es ist oft nützlich, bei Layoutelementen die <code>box-sizing</code> auf <code>border-box</code> zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können. Bei der Verwendung von <code>position: relative</code> oder <code>position: absolute</code> und der Nutzung von <code>box-sizing: content-box</code> können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.</p>
</div>
</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p>Das <code>box-sizing</code> Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p>
<pre class="brush:css notranslate">/* Schlüsselwortwerte */
box-sizing: content-box;
box-sizing: border-box;
/* Globale Werte */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
</pre>
<h3 id="Values" name="Values">Werte</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} berechnen sich nur aus dem Inhalt des Elementes und enthalten weder <code>border</code>, <code>margin</code> oder <code>padding</code>.</dd>
<dt><code>border-box</code></dt>
<dd>Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten <code>padding</code> und <code>border</code>, aber nicht <code>margin</code>. Das ist das <a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box_model">Boxmodell</a>, das der Internet Explorer im Quirks mode verwendet.</dd>
</dl>
<h2 id="Formale_Definition">Formale Definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax">Formal syntax</h2>
{{csssyntax}}
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Box_sizes_with_content-box_and_border-box" name="Box_sizes_with_content-box_and_border-box">Box sizes mit content-box und border-box</h3>
<p>Dieses Beispiel zeigt, wie unterschiedliche <code>box-sizing</code> Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}</p>
<h2 id="Spezifikationen">Spezifikationen</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 Basic UI', '#box-sizing', 'box-sizing')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>
<p>{{Compat("css.properties.box-sizing")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box model">CSS Boxmodell</a></li>
</ul>
|
