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/box-sizing/index.html | 137 +++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/de/web/css/box-sizing/index.html (limited to 'files/de/web/css/box-sizing/index.html') diff --git a/files/de/web/css/box-sizing/index.html b/files/de/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7c07a9c554 --- /dev/null +++ b/files/de/web/css/box-sizing/index.html @@ -0,0 +1,137 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/box-sizing +--- +
+

{{CSSRef}}

+ +

Die CSS Eigenschaft box-sizing legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

Im CSS box model wird die Breite width und die Höhe height, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen border oder Innenabstände padding verfügt, wird diese zu der Breite width und Höhe height 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 width und Höhe height 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 width: 25%; 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.

+ +

Die box-sizing Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:

+ + + +
+

Hinweis: Es ist oft nützlich, bei Layoutelementen die box-sizing auf border-box 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 position: relative oder position: absolute und der Nutzung von box-sizing: content-box 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.

+
+
+ +

Syntax

+ +

Das box-sizing Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

+ +
/* Schlüsselwortwerte */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale Werte */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

Werte

+ +
+
content-box
+
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 border, margin oder padding.
+
border-box
+
Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Box sizes mit content-box und border-box

+ +

Dieses Beispiel zeigt, wie unterschiedliche box-sizing Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
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 */
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Definition
+ +

Browser Kompabilität

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Siehe auch

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