033.4 Lektion 1

Die Standardeinstellung des Browsers für die Darstellung der Dokumentstruktur ist der normale Fluss (normal flow). Die Rechtecke, die den Elementen entsprechen, werden mehr oder weniger in der gleichen Reihenfolge platziert, in der sie im Dokumentbaum erscheinen, relativ zu ihren übergeordneten Elementen. Je nach Elementtyp kann das entsprechende Rechteck jedoch unterschiedlichen Positionierungsregeln folgen.

Eine gute Möglichkeit, die Logik des normalen Flusses nachzuvollziehen, besteht darin, die Boxen sichtbar zu machen. Wir beginnen mit einer sehr einfachen Seite mit nur drei separaten div-Elementen, von denen jedes einen Absatz mit beliebigem Text enthält:

Jedes Wort befindet sich in einem span-Element, so dass wir die Wörter auszeichnen und sehen, wie auch sie als Boxen behandelt werden. Um die Boxen sichtbar zu machen, bearbeiten wir die Stylesheet-Datei style.css, auf die das HTML-Dokument verweist. Die folgenden Regeln liefern das gewünschte Ergebnis:

Das Ergebnis zeigt Figure 1.

Figure 1 zeigt, dass jedes HTML-Tag eine entsprechende Box im Layout hat. Die Elemente div, h2 und p nehmen die Breite ihres übergeordneten Elements ein. Zum Beispiel ist das übergeordnete Element der div-Elemente das body-Element, so dass sie die Breite des Body annehmen, während das übergeordnete Element jedes h2- und p-Elements das entsprechende div ist. Die Boxen, die sich auf die Breite ihres übergeordneten Elements erstrecken, werden Block-Elemente genannt. Einige der häufigsten HTML-Tags, die als Blöcke dargestellt werden, sind h1, h2, h3, p, ul, ol, table, li, div, section, form und aside. Geschwister-Block-Elemente — also Block-Elemente, die dasselbe unmittelbare Elternelement haben — werden innerhalb ihres Elternelements von oben nach unten gestapelt.

Neben dem Text selbst erwarten Elemente wie h1, p und li nur Inline-Elemente als Kinder. Wie die meisten westlichen Schriftsysteme folgen Inline-Elemente dem Textfluss von links nach rechts. Wenn auf der rechten Seite kein Platz mehr ist, wird der Fluss der Inline-Elemente in der nächsten Zeile fortgesetzt, genau wie Text. Einige gängige HTML-Tags, die als Inline-Boxen behandelt werden, sind span, a, em, strong, img, input und label.

In unserer HTML-Beispielseite wurde jedes Wort innerhalb der Absätze von einem span-Tag umgeben, um es mit einer entsprechenden CSS-Regel hervorheben zu können. Wie in der Abbildung gezeigt, wird jedes span-Element horizontal von links nach rechts platziert, bis kein Platz mehr im übergeordneten Element vorhanden ist.

Die Höhe des Elements hängt von seinem Inhalt ab. Der Browser passt die Höhe eines Container-Elements so an, dass es die verschachtelten Block-Elemente oder Zeilen von Inline-Elementen aufnehmen kann. Einige CSS-Eigenschaften wirken sich jedoch auf die Form einer Box, ihre Position und die Platzierung ihrer inneren Elemente aus.

Die Eigenschaften margin und padding betreffen alle Box-Typen. Wenn Sie diese Eigenschaften nicht explizit festlegen, setzt der Browser einige von ihnen mit Standardwerten. Wie in Figure 1 zu sehen, ist zwischen den Elementen h2 und p ein Abstand. Solche Abstände sind die oberen und unteren Ränder, die der Browser standardmäßig zu diesen Elementen hinzufügt. Wir können sie über die CSS-Regeln für die Selektoren h2 ind p ändern:

Das Ergebnis zeigt Figure 2.

Das Element body hat standardmäßig einen kleinen Rand, der einen Abstand um das Element herum bildet. Auch dieser Abstand kann über Eigenschaft margin entfernt werden.

Während die Eigenschaft margin den Abstand zwischen dem Element und seiner Umgebung definiert, bestimmt die Eigenschaft padding des Elements den inneren Abstand zwischen den Grenzen des Containers und seinen Kind-Elementen. Betrachten wir zum Beispiel die Elemente h2 und p innerhalb jedes div im Beispielcode. Wir könnten einen Abstand zu den Grenzen des entsprechenden div über ihre margin-Eigenschaft schaffen, aber es ist einfacher, die padding-Eigenschaft des Containers zu ändern:

Nur die Regel für das zweite div wurde geändert, so dass die Ergebnisse (Figure 3) den Unterschied zwischen dem zweiten div und den anderen div-Containern zeigen.

Die Eigenschaft margin ist eine Abkürzung für vier Eigenschaften, die die vier Seiten der Box steuern: margin-top, margin-right, margin-bottom und margin-left. Ist margin ein einzelner Wert zugewiesen, wie in den bisherigen Beispielen, wird dieser für alle vier Ränder der Box verwendet. Wenn zwei Werte gesetzt sind, definiert der erste den oberen und unteren Rand, während der zweite den rechten und linken Rand bestimmt. margin: 1em 2em zum Beispiel definiert einen Abstand von 1 em für den oberen und unteren Rand, und einen Abstand von 2 em für den rechten und linken Rand. Die Angabe von vier Werten legt die Ränder für die vier Seiten im Uhrzeigersinn fest, beginnend mit dem oberen Rand. Die verschiedenen Werte in der Shorthand-Eigenschaft müssen nicht die gleichen Einheiten verwenden.

Die Eigenschaft padding ist ebenfalls eine Kurzform, die denselben Grundsätzen folgt wie die Eigenschaft margin.

Standardmäßig passen sich Block-Elemente an die verfügbare Breite an. Dies ist jedoch nicht zwingend erforderlich. Mit der Eigenschaft width können Sie eine feste horizontale Größe für die Box festlegen:

Durch die Ergänzung width: 6em zur CSS-Regel wird das erste div horizontal geschrumpft, so dass auf der rechten Seite ein Leerraum bleibt (Figure 4).

Statt das erste div links auszurichten, wollen wir es zentrieren. Das Zentrieren einer Box ist gleichbedeutend mit gleich großen Rändern auf beiden Seiten, so dass wir die Eigenschaft margin verwenden können. Die Größe des verfügbaren Platzes kann variieren, daher verwenden wir den Wert auto für linken und rechten Rand:

Linker und rechter Rand werden automatisch vom Browser berechnet und die Box wird zentriert (Figure 5).

Wie gezeigt, wird durch die Verschmälerung eines Block-Elements der verbleibende Platz nicht für das nächste Element verfügbar gemacht. Der normale Fluss bleibt erhalten, als ob das schmalere Element weiterhin die gesamte verfügbare Breite einnimmt.

Der normale Fluss ist einfach und sequentiell. Mit CSS können Sie ihn unterbrechen und Elemente auf ganz bestimmte Weise positionieren und sogar den Bildlauf der Seite überschreiben. In diesem Abschnitt sehen wir uns verschiedene Möglichkeiten zur Steuerung der Positionierung von Elementen an.

Wir wissen, dass CSS Eigenschaften zur Verfügung stellt, über die sich die Größe von Elementen und Schriften an den verfügbaren Bildschirmbereich anpassen. Vielleicht möchten Sie aber noch weiter gehen und für verschiedene Geräte unterschiedliche Designs nutzen, beispielsweise Desktop-Systeme gegenüber Geräten mit Bildschirmen bis zu einer bestimmten Größe. Dieser Ansatz wird Responsive Webdesign genannt, und CSS bietet dafür entsprechende Methoden, sogenannte Media Queries.

Im vorangegangenen Beispiel haben wir das Seitenlayout so geändert, dass die div-Elemente nebeneinander in Spalten angeordnet sind. Dieses Layout ist für größere Bildschirme geeignet, ist aber auf kleineren Bildschirmen zu unübersichtlich. Um dieses Problem zu lösen, können wir im Stylesheet eine Media Query (“Medienabfrage”) ergänzen, so dass nur Bildschirme mit einer Breite von mindestens 600px berücksichtigt werden:

Die CSS-Regeln innerhalb der @media-Anweisung greifen nur, wenn die Kriterien in Klammern erfüllt sind. In diesem Beispiel wird die Regel nicht auf den Container div angewendet, wenn die Breite des Ansichtsfensters kleiner als 600px ist, und seine Kinder dann als herkömmliche div-Elemente dargestellt. Der Browser wertet die Medienabfragen jedes Mal neu aus, wenn sich die Abmessungen des Ansichtsfensters ändern, so dass sich das Layout in Echtzeit ändert, sobald sich die Größe des Browserfensters ändert oder das Smartphone gedreht wird.