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
|
---
title: Layout mode
slug: Web/CSS/Layout_mode
tags:
- CSS
translation_of: Web/CSS/Layout_mode
---
<p>Ein <a href="/de/docs/Web/CSS">CSS</a> <strong>Layoutmodus</strong>, manchmal als <em>Layout</em> abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:</p>
<ul>
<li>Das <em>Blocklayout</em>, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente <a href="/en-US/docs/Web/CSS/float"><em>umzubrechen</em></a> oder sie in <a href="/de/docs/CSS3_Columns"><em>mehreren Spalten</em></a> darzustellen.</li>
<li>Das <em>Inlinelayout</em>, designt, um Text darzustellen.</li>
<li>Das <em>Tabellenlayout</em>, designt, um Tabellen darzustellen.</li>
<li>Das <em>positionierte Layout</em>, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.</li>
<li>Das <a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>Flexboxlayout</em></a>, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}</li>
<li>Das <em>Rasterlayout</em>, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}</li>
</ul>
<div class="note">
<p><strong>Hinweis:</strong> Nicht alle <a href="/de/docs/Web/CSS/Referenz">CSS Eigenschaften</a> gelten für alle <em>Layoutmodi</em>. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.</p>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>{{CSS_key_concepts}}</li>
</ul>
|
