Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Block- und Inline-Boxen im Flow: Der Block Formatting Context

Block- und Inline-Boxen im Flow: Der Block Formatting Context

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Block- und Inline-Boxen im Flow: Der Block Formatting Context

“

Das Layouten mit CSS basiert auf der Idee, dass die von HTML-Elementen erzeugten Boxen innerhalb eines Formatting Context existieren, einer Gestaltungsumgebung, in der bestimmte Regeln gelten. Nach dem Erstellen einer Webseite arbeiten Sie in einem Block Formatting Context, der durch das Stammelement html erstellt wird und in dem es Block- und Inline-Boxen gibt, die sich normalerweise im sogenannten Flow befinden. Der Flow im Block Formatting Context wird gekennzeichnet durch bestimmte Regeln für das Verhalten von Boxen und hier geht es zunächst los mit Inline-Boxen, also Boxen, die durch "display: inline;" oder auch "display: inline-block;" erstellt wurden. Die erste Inline-Box beginnt so weit wie möglich oben links. Inline-Boxen stehen nebeneinander und werden nur so weit wie er Inhalt und bei Platzmangel geht es in der nächsten Zeile links am Anfang wieder weiter. Inline-Boxen fließen horizontal, also von links nach rechts. Das ist der Flow für Inline-Boxen. Blockboxen sind etwas…

Inhalt