Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CSS Fluss-Layout
Normal Flow, oder Fluss-Layout, ist die Art und Weise, wie Block- und Inline-Elemente auf einer Seite angezeigt werden, bevor Änderungen an ihrem Layout vorgenommen werden. Der Fluss ist im Wesentlichen eine Gruppe von Dingen, die alle zusammenarbeiten und im Layout voneinander wissen. Sobald etwas aus dem Fluss genommen wird, funktioniert es unabhängig.
Im normalen Fluss werden Inline -Elemente in der Inline-Richtung angezeigt, das heißt, in der Richtung, in der Wörter in einem Satz gemäß dem Schreibmodus des Dokuments angezeigt werden. Block -Elemente werden nacheinander angezeigt, so wie Absätze im Schreibmodus dieses Dokuments. Im Englischen werden Inline-Elemente daher nacheinander angezeigt, beginnend von links, und Block-Elemente beginnen oben und bewegen sich die Seite hinunter.
Einfaches Beispiel
Das folgende Beispiel zeigt Block- und Inline-Level-Boxen. Die beiden Absatz-Elemente mit einem grünen Rahmen sind Block-Level und werden übereinander angezeigt.
Der erste Satz enthält auch ein Span-Element mit einem blauen Hintergrund. Dies ist Inline-Level und wird daher innerhalb des Satzes angezeigt.
<div class="box">
<p>
One <span>November</span> night in the year 1782, so the story runs, two
brothers sat over their winter fire in the little French town of Annonay,
watching the grey smoke-wreaths from the hearth curl up the wide chimney.
Their names were Stephen and Joseph Montgolfier, they were papermakers by
trade, and were noted as possessing thoughtful minds and a deep interest in
all scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of millions
of people had watched the rising smoke-wreaths of their fires without
drawing any special inspiration from the fact.
</p>
</div>
body {
font: 1.2em sans-serif;
}
p {
border: 2px solid green;
}
span {
background-color: lightblue;
}