Bisher haben wir uns mit den Grundlagen von CSS befasst, wie man Text formatiert und wie man das Feld festlegt und manipuliert, in dem sich der Inhalt befindet . Jetzt ist es an der Zeit, zu prüfen, wie Sie Ihre Boxen basierend auf dem Ansichtsfenster und im Verhältnis zueinander richtig anordnen . Wir haben die notwendigen Voraussetzungen abgedeckt, also lasst uns in das CSS-Layout eintauchen und uns die verschiedenen Funktionen ansehen: verschiedene Anzeigeeinstellungen, Positionierung, moderne Layout-Tools wie Flexbox und CSS-Raster und einiges mehr, was Sie vielleicht noch über die Legacy-Technologie wissen möchten.

1. Übersicht

1.1 Richtlinien

Diese Artikel bieten Anleitungen zu den grundlegenden Layout-Tools und -Techniken, die in CSS verfügbar sind. Am Ende des Kurses findet eine Prüfung statt, die Ihnen dabei hilft, Ihr Verständnis von Layout-Methoden beim Entwerfen von Webseiten zu überprüfen.

1.1.1 Einführung in das CSS-Layout

In diesem Artikel werden einige der CSS-Layoutfunktionen besprochen, die wir in früheren Modulen angesprochen haben (z. B. unterschiedliche Anzeigewerte ), und einige der Konzepte vorgestellt, die wir in diesem Modul besprechen werden.

1.1.2Normaler Durchfluss

Elemente auf einer Webseite folgen einem regelmäßigen Ablauf – es sei denn, wir unternehmen etwas, um ihn zu ändern . In diesem Artikel werden die Grundlagen des normalen Flusses erläutert, um zu lernen, wie man ihn ändert.

1.1.3 Flexbox

Flexbox ist eine eindimensionale Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten . Artikel können gedehnt werden, um zusätzlichen Platz zu füllen, oder schrumpfen, um in kleinere Räume zu passen. In diesem Artikel werden alle Grundprinzipien erläutert. Nachdem Sie diesen Leitfaden studiert haben, können Sie Ihre Flexbox-Fähigkeiten testen , um Ihr Verständnis zu überprüfen, bevor Sie fortfahren.

1.1.4Gitter _

CSS Grid Layout ist ein zweidimensionales Layoutsystem für das Web . Sie können Inhalte in Zeilen und Spalten anordnen und verfügen über viele Funktionen, die das Erstellen komplexer Layouts vereinfachen. In diesem Artikel erhalten Sie alles, was Sie wissen müssen, um mit dem Seitenlayout zu beginnen. Anschließend können Sie Ihre Rasterkenntnisse testen , bevor Sie fortfahren .

1.1.5 Schwebend

Ursprünglich wurde die Float -Eigenschaft verwendet, um Bilder innerhalb von Textblöcken schweben zu lassen. Sie wurde jedoch zu einem der am häufigsten verwendeten Werkzeuge zum Erstellen mehrspaltiger Layouts auf Webseiten . Mit dem Aufkommen von Flexbox und Grid ist es nun zu seinem ursprünglichen Zweck zurückgekehrt, wie dieser Artikel erklärt.

1.1.6 Positionierung

Durch die Positionierung können Sie Elemente aus dem normalen Dokumentlayoutfluss herausnehmen und ihnen ein anderes Verhalten verleihen , indem Sie sie beispielsweise übereinander platzieren oder immer an derselben Position im Browser-Ansichtsfenster bleiben. In diesem Artikel werden die verschiedenen Positionswerte und deren Verwendung erläutert.

1.1.7 Mehrspaltiges Layout

Mehrspaltige Layout-Spezifikationen bieten Ihnen die Möglichkeit, Ihre Inhalte in Spalten anzuordnen, wie Sie es in einer Zeitung sehen würden . In diesem Artikel wird erläutert, wie Sie diese Funktion verwenden.

1.1.8 Responsives Design

Als auf webfähigen Geräten immer mehr Bildschirmgrößen verfügbar wurden, esponsive web designentstand das Konzept des responsiven Webdesigns (RWD) : 一组允许网页改变其布局和外观以适应不同屏幕宽度、分辨率等的实践. Dieses Konzept hat die Art und Weise, wie wir geräteübergreifende Webseiten entwerfen, verändert. In diesem Artikel helfen wir Ihnen, die wichtigsten Techniken zu verstehen, die Sie zur Beherrschung dieses Konzepts benötigen.

1.1.9 Erste Schritte mit Medienabfragen

Mit CSS-Medienabfragen ( CSS Media Query) können Sie CSS nur dann anwenden, wenn der Browser- und Gerätekontext mit den von Ihnen angegebenen Regeln übereinstimmt , z. B. „Die Breite des Ansichtsfensters ist größer als 480 Pixel.“ Medienabfragen sind ein wichtiger Bestandteil des responsiven Webdesigns, da sie es Ihnen ermöglichen, je nach Größe des Ansichtsfensters unterschiedliche Layouts zu erstellen. Sie können auch verwendet werden, um andere Merkmale der Umgebung zu erkennen, in der die Site ausgeführt wird, beispielsweise ob ein Benutzer einen Touchscreen anstelle einer Maus verwendet . In dieser Lektion lernen Sie zunächst die in Medienabfragen verwendete Syntax kennen und verwenden sie dann in einem interaktiven Beispiel, das zeigt, wie Sie ein einfaches Design responsive gestalten.

1.1.10 Traditionelle Layout-Implementierung

Das Rastersystem ist eine sehr häufige Funktion im CSS-Layout . Vor CSS-Rasterlayouts wurden diese in der Regel mithilfe von Floats oder anderen Layoutfunktionen implementiert. Zunächst können Sie sich das Layout als eine Reihe von Spalten vorstellen (z. B. 4, 6 oder 12) und dann die Inhaltsspalten in diesen imaginären Spalten platzieren. In diesem Artikel untersuchen wir, wie diese alten Methoden funktionierten, damit Sie verstehen, wie Sie sie bei der Arbeit an älteren Projekten verwenden.

1.1.11 unterstützt alte Browser

In diesem Modul empfehlen wir die Verwendung von Flexbox und Grid als primäre Layoutmethoden für Ihre Designs . Allerdings werden Sie in Zukunft bestimmt Besucher auf Ihrer entwickelten Website haben, die ältere Browser verwenden oder deren Browser die von Ihnen verwendete Methode nicht unterstützen. Dies ist im Web immer der Fall – wenn neue Funktionen entwickelt werden, priorisieren verschiedene Browser unterschiedliche Funktionen. In diesem Artikel wird erläutert, wie Sie moderne Webtechnologien nutzen können, ohne Benutzer älterer Technologien auszuschließen.

1.2 Bewertung

Mit der folgenden Bewertung testen Sie Ihr Verständnis der im obigen Leitfaden behandelten CSS-Layoutmethoden.

Grundlegendes Layout-Verständnis
Testen Sie Ihr Verständnis verschiedener Layout-Methoden anhand des Webseiten-Layouts.

2. Einführung in das CSS-Layout

In diesem Artikel werden einige der CSS-Layoutfunktionen besprochen, die wir in früheren Modulen angesprochen haben, z. B. verschiedene Anzeigewerte , und einige der Konzepte vorgestellt, die wir in diesem Modul behandeln werden.

Mithilfe der CSS-Seitenlayouttechnologie können wir mit den in einer Webseite enthaltenen Elementen arbeiten und ihre Position relativ zu steuern : 它们在正常布局流中的默认位置、它们周围的其他元素、它们的父容器和主视窗/窗口. Die Seitenlayouttechniken, die wir in diesem Modul ausführlich behandeln, sind:

Normaler Fluss
Die Anzeigeeigenschaft _
Flexbox
Netz
Schwimmt
Positionierung
Tabellenlayout
Mehrspaltiges Layout

Jede Technologie hat ihre Einsatzmöglichkeiten, Vor- und Nachteile . Keine Technologie ist für den isolierten Einsatz konzipiert. Wenn Sie den Zweck verstehen, für den jede Layoutmethode entwickelt wurde, können Sie eine gute Vorstellung davon bekommen, welche Methode für die jeweilige Aufgabe am besten geeignet ist.

2.1 Regelmäßiger Fluss

Der reguläre Fluss bezieht sich darauf, wie der Browser HTML-Seiten standardmäßig anordnet, wenn Sie nichts tun, um das Seitenlayout zu steuern . Schauen wir uns ein einfaches HTML-Beispiel an:

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

Standardmäßig zeigt der Browser Code wie diesen an:
Fügen Sie hier eine Bildbeschreibung ein
Beachten Sie, dass der HTML-Code genau in der Reihenfolge angezeigt wird, in der er im Quellcode erscheint , wobei die Elemente übereinander gestapelt sind – der erste Absatz, dann die ungeordnete Liste, dann der zweite Absatz

Elemente, die untereinander erscheinen, werden als Blockelemente ( block elements) bezeichnet, im Gegensatz zu Inline-Elementen ( inline elements), die wie einzelne Wörter in einem Absatz nebeneinander erscheinen.

Hinweis: Die Layoutrichtung des Inhalts eines Blockelements wird als Blockrichtung ( Block Direction) bezeichnet . In Sprachen wie Englisch, die über einen horizontalen Schreibmodus verfügen, verläuft die Blockrichtung vertikal. Es läuft horizontal in jeder Sprache mit vertikalem Schreibmodus, beispielsweise Japanisch. Die entsprechende Inline-Richtung ist die Richtung, in der Inline-Inhalte (z. B. Sätze) ausgeführt werden.

Für viele Elemente auf der Seite wird durch den normalen Prozess das benötigte Layout erstellt. Bei komplexeren Layouts müssen Sie jedoch einige der in CSS verfügbaren Tools verwenden, um dieses Standardverhalten zu ändern . Es ist wichtig, mit einem gut strukturierten HTML-Dokument zu beginnen, damit Sie das Standardlayout verwenden können, anstatt dagegen anzukämpfen.

Zu den Methoden, die das Layout von Elementen in CSS ändern können, gehören:

Anzeigeattribut - Standardwerte wieoderkönnen das Verhalten eines Elements im normalen Fluss ändern, indem beispielsweise Elemente auf Blockebene sich wie Elemente auf Inline-Ebene verhalten (weitere Informationen finden Sie unter Arten von CSS-blockBeispielen ) . Wir ermöglichen auch ganze Layoutmethodenüber bestimmte Werte, wie z. B. CSS Grid und Flexbox , die die Anordnung untergeordneter Elemente innerhalb ihrer übergeordneten Elemente ändern.inlineinline-blockdisplay
float( Floats) – Das Anwenden eines Float -Werts (z. B. left) kann dazu führen, dass Elemente auf Blockebene an der Seite des Elements umbrochen werden, ähnlich wie bei Bildern in Zeitschriftenlayouts manchmal Text um sie herum schwebt.
Mit der Positionseigenschaft können Sie die Position einer Box innerhalb anderer Boxen genau steuern. staticDie Positionierung ist im normalen Fluss die Standardeinstellung , Sie können jedoch auch andere Werte verwenden, um das Layout des Elements zu ändern, um es beispielsweise oben im Browserfenster zu verankern.
Tabellenlayoutfunktionen , die für die teilweise Gestaltung von HTML-Tabellen entwickelt wurden, können display: tableüber die und zugehörigen Attribute auf Nicht-Tabellenelemente angewendet werden.
Mehrspaltiges Layout Mit der Eigenschaft „Mehrspaltiges Layout“ kann der Inhalt eines Blocks in Spalten angeordnet werden, wie man es in einer Zeitung sieht.

2.2 Anzeigeattribut

Die Hauptmethoden zur Implementierung des Seitenlayouts in CSS umfassen die Angabe des Werts des Anzeigeattributs . 这个属性允许我们改变默认的显示方式. Alles im normalen Fluss hat veinen Standardwert, d. h. die Standardart, wie sich ein Element verhält . Die Tatsache, dass englische Absätze beispielsweise unter einem anderen Absatz erscheinen, liegt an den verwendeten Stilen display: block. Wenn Sie einen Link um einen Text innerhalb eines Absatzes erstellen, bleibt der Link in einer Linie mit dem Rest des Textes, ohne dass eine neue Zeile eingefügt wird. Dies liegt daran, dass <a>das Element standardmäßig den Wert hat display: inline.

Sie können dieses Standardanzeigeverhalten ändern. Das Element lautet beispielsweise <li>standardmäßig display: block, was bedeutet, dass in unserem englischen Dokument die Listenelemente untereinander angezeigt werden. Wenn wir den Anzeigewert auf ändern inline, werden sie nebeneinander angezeigt, wie Wörter in einem Satz. Sie können displayden Wert jedes Elements ändern, was bedeutet, dass Sie HTML-Elemente basierend auf der Semantik auswählen können, ohne sich um deren Aussehen zu kümmern. Ihr Aussehen kann verändert werden .

Neben der Möglichkeit, die Standarddarstellung durch Ändern von Elementen von block in (oder umgekehrt) zu ändern, gibt es einige komplexere Layoutmethoden, die mit dem Wert beginnen. Wenn Sie diese Eigenschaften verwenden, müssen Sie jedoch normalerweise andere Eigenschaften aufrufen. Die beiden wichtigsten Werte, wenn wir über das Layout sprechen, sind und .inline displaydisplay: flexdisplay: grid

2.3 Flexbox

Flexbox, kurz für das CSS-Modul „Flexible Box Layout“ , wurde entwickelt, um das Layout in einer Dimension zu vereinfachen – entweder als Zeilen oder als Spalten . Um Flexbox zu verwenden, müssen Sie Flexbox auf das übergeordnete Element des Elements anwenden, das Sie gestalten möchten. display: flexDann werden alle seine direkten untergeordneten Elemente zu flex items. Wir können dies an einem einfachen Beispiel sehen.

Anzeige einstellen: Flex

Das folgende HTML-Markup gibt uns ein wrapperenthaltendes Element mit einer Klasse, die drei <div>Elemente enthält. Standardmäßig werden diese Elemente als Blockelemente angezeigt, das heißt, sie befinden sich in unseren englischsprachigen Dokumenten unter einem anderen Element.

.wrapper {
    
    
  display: flex;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

Flex-Eigenschaft festlegen

Zusätzlich zu den Eigenschaften, die auf Flex-Container ( flex container) angewendet werden können, gibt es auch Eigenschaften, die auf Flex-Elemente ( flex items) angewendet werden können . Diese Eigenschaften können unter anderem die Art und Weise verändern, wie sich Gegenstände biegen, sodass sie sich je nach verfügbarem Platz ausdehnen oder zusammenziehen können.

Als einfaches Beispiel können wir die Flex- Eigenschaft allen untergeordneten Elementen hinzufügen und ihren Wert auf festlegen 1. Dadurch wachsen alle Gegenstände und füllen den Behälter, anstatt am Ende Platz zu lassen. Bei mehr Platz werden die Artikel breiter, bei weniger Platz werden sie schmaler. Wenn Sie außerdem ein weiteres Element zum Markup hinzufügen, werden alle anderen Elemente kleiner, um Platz dafür zu schaffen; zusammen nehmen diese Elemente weiterhin den gesamten Platz ein.

.wrapper {
    
    
  display: flex;
}

.wrapper > div {
    
    
  flex: 1;
}

Hinweis: Dies ist eine sehr kurze Einführung in die Möglichkeiten von Flexbox. Weitere Informationen finden Sie in unserem Flexbox- Artikel.

2.4 Rasterlayout

Flexbox ist für ein eindimensionales Layout konzipiert, während das Grid-Layout für ein zweidimensionales Layout konzipiert ist – die Anordnung von Dingen in Zeilen und Spalten.

Anzeige einstellen: Raster

Ähnlich wie bei Flexbox aktivieren wir das Rasterlayout mithilfe spezifischer Anzeigewertedisplay: grid . Das folgende Beispiel verwendet ein ähnliches Markup wie das Flex-Beispiel, mit einem Container und einigen kleinen Elementen. Zusätzlich zur Verwendung definieren display: gridwir auch einige Zeilen- und Spaltenspuren für das übergeordnete Objekt mithilfe der Eigenschaften „grid-template-rows“ bzw. „grid-template-columns“ . Wir definieren drei Spalten mit jeweils 1 Fr und zwei Zeilen mit 100 Pixeln. Für untergeordnete Elemente müssen wir keine Regeln festlegen; sie werden automatisch in den von unserem Raster erstellten Zellen platziert.

.wrapper {
    
    
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
  <div class="box6">Six</div>
</div>

Platzieren Sie Gegenstände auf dem Raster

Sobald Sie über ein Raster verfügen, können Sie Ihre Elemente explizit darauf platzieren, anstatt sich auf das oben beschriebene automatische Platzierungsverhalten zu verlassen . Im folgenden Beispiel definieren wir dasselbe Raster, diesmal jedoch mit drei untergeordneten Elementen. Wir haben die Start- und Endzeilen jedes Eintrags mithilfe der Eigenschaften „grid-column“ und „grid-row“ festgelegt. Dies führt dazu, dass sich die Elemente über mehrere Spuren erstrecken.

.wrapper {
    
    
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.box1 {
    
    
  grid-column: 2 / 4;
  grid-row: 1;
}

.box2 {
    
    
  grid-column: 1;
  grid-row: 1 / 3;
}

.box3 {
    
    
  grid-row: 2;
  grid-column: 3;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

Hinweis: Diese beiden Beispiele sind nur ein kleines Beispiel für das Rasterlayout. Weitere Informationen finden Sie in unserem Artikel zum Rasterlayout .

Der Rest dieses Handbuchs behandelt andere Layoutmethoden, die für das Hauptlayout der Seite weniger wichtig sind, aber dennoch für die Erreichung bestimmter Aufgaben nützlich sind . Wenn Sie die Art jeder Layoutaufgabe verstehen, werden Sie schnell feststellen, dass beim Betrachten einer bestimmten Komponente eines Entwurfs normalerweise klar ist, welcher Layouttyp dafür am besten geeignet ist.

2,5 Schwimmer

Das Schweben eines Elements ändert das Verhalten dieses Elements und der ihm im normalen Ablauf folgenden Blockebenenelemente . Das schwebende Element wird nach links oder rechts verschoben und aus dem normalen Fluss entfernt, wobei der umgebende Inhalt um es herum schwebt.

Float-Eigenschaften haben vier mögliche Werte:

left- Lassen Sie das Element nach links schweben.
right- Lassen Sie das Element nach rechts schweben.
none-Geben Sie an, dass es nicht schweben soll. Es ist der Standardwert.
inherit– Gibt an, dass der Wert einer Float-Eigenschaft vom übergeordneten Element des Elements geerbt werden soll.

Im folgenden Beispiel verschieben wir <div>es auf der linken Seite und setzen einen Rand auf der rechten Seite, um den umgebenden Text davon fernzuhalten .这为我们提供了文本围绕框元素的效果，这是你在现代网页设计中所需要知道的关于浮动的大部分内容。

.box {
    
    
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}

<h1>Simple float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

Hinweis: Float wird in unserer Lektion zu Float- und Clear -Eigenschaften ausführlich erklärt . Vor dem Aufkommen von Technologien wie Flexbox und Grid Layout wurden Floats als Methode zum Erstellen von Spaltenlayouts verwendet . Möglicherweise stoßen Sie online immer noch auf diese Methoden; wir werden sie in der Lektion „Legacy-Layoutmethoden“ behandeln.

2.6 Ortungstechnik

Durch die Positionierung können Sie ein Element von der Position, an der es im regulären Fluss platziert ist, an eine andere Position verschieben .定位不是一种创建页面主要布局的方法;它更多的是关于管理和微调页面上特定项的位置。

Es gibt jedoch einige nützliche Techniken zum Erhalten bestimmter Layoutmodi, die von der Positionseigenschaft abhängen . Das Verständnis der Positionierung hilft Ihnen auch, den regulären Fluss zu verstehen und zu verstehen, was es bedeutet, ein Element aus dem regulären Fluss zu verschieben.

Hier sind fünf Arten der Positionierung, die Sie kennen sollten:

Statische Positionierung ( Static positioning) ist die Standardeinstellung für jedes Element . Es bedeutet „das Element an seine normale Position im Dokumentlayoutfluss setzen – hier nichts Besonderes“.
Mit der relativen Positionierung ( Relative positioning) können Sie die Position eines Elements auf der Seite ändern, es relativ zu seiner Position im normalen Fluss verschieben und es mit anderen Elementen auf der Seite überlappen lassen .
Durch die absolute Positionierung ( Absolute positioning) wird ein Element vollständig aus dem normalen Layoutfluss der Seite verschoben, als ob es sich auf einer eigenen separaten Ebene befände . Von dort aus können Sie es an einer Position relativ zur Kante seines nächsten positionierten Vorfahren anheften (oder es wird, wenn keine anderen Vorfahren positioniert sind <html>) . Dies ist nützlich, um komplexe Layouteffekte zu erstellen, z. B. Registerkartenfelder, in denen sich verschiedene Inhaltsbereiche überlappen und je nach Bedarf ein- und ausgeblendet werden, oder Informationsbereiche, die standardmäßig außerhalb des Bildschirms liegen, aber mithilfe der Steuerschaltflächen über den Bildschirm verschoben werden können.
Die feste Positionierung ( Fixed positioning) ist der absoluten Positionierung sehr ähnlich, außer dass sie ein Element relativ zum Browser-Ansichtsfenster fixiert und nicht ein anderes Element . Dies ist nützlich für Effekte wie die Erstellung dauerhafter Navigationsmenüs, die sich immer an derselben Position auf dem Bildschirm befinden, während der Rest des Inhalts scrollt.
Sticky Positioning ( Sticky positioning) ist eine neuere Positionierungsmethode, die dafür sorgt, dass sich ein Element ähnlich verhält, position: relativebis es einen definierten Versatz vom Ansichtsfenster erreicht und sich dann ähnlich verhält position: fixed.

Einfaches Targeting-Beispiel

Um Sie mit diesen Seitenlayout-Techniken vertraut zu machen, zeigen wir Ihnen ein paar kurze Beispiele. Unsere Beispiele folgen alle derselben HTML-Struktur (einer Überschrift gefolgt von drei Absätzen), wie unten gezeigt:

<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

Standardmäßig verwendet dieser HTML-Code die folgenden CSS-Stile:

body {
    
    
  width: 500px;
  margin: 0 auto;
}

p {
    
    
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

relative Positionierung

Durch die relative Positionierung können Sie Elemente von ihrer Standardposition im regulären Fluss versetzen . Dies bedeutet, dass Sie beispielsweise ein Symbol etwas nach unten verschieben können, damit es an einer Textbeschriftung ausgerichtet ist. Dazu können wir die folgende Regel hinzufügen, um eine relative Positionierung hinzuzufügen:

.positioned {
    
    
  position: relative;
  top: 30px;
  left: 30px;
}

Hier geben wir dem mittleren Absatz einen relativePositionswert . Da es selbst nichts macht, fügen wir auch die Eigenschaften „oben “ und „links“ hinzu . Sie verschieben das betroffene Element nach unten und nach rechts . Dies mag wie das Gegenteil von dem erscheinen, was Sie erwarten würden, aber Sie müssen es sich so vorstellen, als würde das Element nach links und oben gedrückt, wodurch es sich nach rechts und nach unten bewegt.

absolute Positionierung

Die absolute Positionierung wird verwendet, um ein Element vollständig aus dem normalen Fluss zu entfernen und es stattdessen mit einem Versatz vom Rand des enthaltenden Blocks zu positionieren.

Zurück zu unserem ursprünglichen, nicht positionierten Beispiel: Wir können die folgende CSS-Regel hinzufügen, um eine absolute Positionierung zu erreichen:

.positioned {
    
    
  position: absolute;
  top: 30px;
  left: 30px;
}

Hier geben wir dem mittleren Absatz positioneinen Wert und absolutedieselben Attribute wie zuvor.topleft

Das ist ganz anders! Das positionierte Element ist jetzt vollständig vom Rest des Seitenlayouts getrennt und befindet sich oben im Seitenlayout . Die anderen beiden Absätze werden nun so zusammengefügt, als ob ihre positionierten Geschwisterelemente nicht vorhanden wären. Die Attribute „top“ und „left“ haben auf absolut positionierte Elemente andere Auswirkungen als auf relativ positionierte Elemente. In diesem Fall wird der Versatz vom oberen und linken Rand der Seite berechnet. Das übergeordnete Element kann so geändert werden, dass es zu diesem Container wird , was wir in der Positionierung sehen werden .

Feste Positionierung

Bei der festen Positionierung wird ein Element auf die gleiche Weise wie bei der absoluten Positionierung aus dem Dokumentenfluss entfernt. Anstatt jedoch den Versatz vom Container anzuwenden, wird der Versatz vom Ansichtsfenster aus angewendet . Da die Elemente relativ zum Ansichtsfenster fixiert bleiben, können wir den Effekt eines Menüs erzeugen, das fixiert bleibt, während die Seite darunter scrollt.

Für dieses Beispiel enthält unser HTML drei Textabsätze, damit wir auf der Seite scrollen können, und ein position: fixedFeld mit dem Attribut .

<h1>Fixed positioning</h1>

<div class="positioned">Fixed</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci.
</p>

<p>
  Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed
  auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
  vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex
  malesuada et.
</p>

<p>
  In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet
  turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas
  augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id
  ornare felis, eget fermentum sapien.
</p>

.positioned {
    
    
  position: fixed;
  top: 30px;
  left: 30px;
}

klebrige Positionierung

Sticky Positioning ist die letzte Positionierungsmethode, die wir verwenden können. Es handelt sich um eine Mischung aus relativer Positionierung und fester Positionierung. Wenn ein Element über verfügt position: sticky, scrollt es im normalen Fluss, bis es vom von uns definierten Ansichtsfenster versetzt ist. An diesem Punkt bleibt es „stecken“, als ob es Position:FixedApp hätte.

.positioned {
    
    
  position: sticky;
  top: 30px;
  left: 30px;
}

Hinweis: Weitere Informationen zum Targeting finden Sie in unserem Targeting- Artikel.

2.7 Tabellenlayout

HTML-Tabellen eignen sich hervorragend für die Anzeige tabellarischer Daten, aber vor vielen Jahren – noch bevor grundlegendes CSS zuverlässig von Browsern unterstützt wurde – nutzten Webentwickler Tabellen für das Layout ganzer Webseiten und teilten ihre Kopfzeilen, Fußzeilen, Spalten usw. in separate Tabellen auf Tabellenzeilen und -spalten . Das funktionierte damals, hatte aber viele Probleme: Das Tabellenlayout war unflexibel, sehr markupintensiv, schwer zu debuggen und wies semantische Fehler auf (Benutzer von Bildschirmleseprogrammen hatten beispielsweise Probleme beim Navigieren im Tabellenlayout).

Wenn Sie das Tabellen-Markup verwenden, hängt das Erscheinungsbild der Tabelle auf der Webseite von einer Reihe von CSS-Eigenschaften ab, die das Layout der Tabelle definieren. Dieselben Eigenschaften können auch zum Layouten von Nicht-Tabellenelementen verwendet werden, eine Verwendung, die manchmal als „Verwenden von CSS-Tabellen( using CSS tables)“ beschrieben wird .

Das folgende Beispiel zeigt eine solche Verwendung. Es ist wichtig darauf hinzuweisen, dass die Verwendung von CSS-Tabellen für das Layout an dieser Stelle als veraltete Methode betrachtet werden sollte und nur zur Unterstützung älterer Browser verwendet werden sollte, denen Flexbox- oder Grid-Unterstützung fehlt.

Schauen wir uns ein Beispiel an. Zunächst einige einfache Markups zum Erstellen eines HTML-Formulars. Jedes Eingabeelement hat eine Beschriftung, und wir fügen auch einen Titel in den Absatz ein. Aus Layoutgründen wird jedes Label/Eingabe-Paar in <div>.

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname" />
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" />
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age" />
  </div>
</form>

Was CSS betrifft, displayist das meiste davon ziemlich banal, abgesehen von der Verwendung von Eigenschaften. <form>, <div>s, <label>s und <input>s werden jeweils als Tabellen, Tabellenzeilen und Tabellenzellen angezeigt. Im Grunde verhalten sie sich wie HTML-Tabellen-Tags und sorgen dafür, dass Tags und Eingaben standardmäßig gut ausgerichtet sind. Dann müssen wir nur noch etwas Größe, Ränder usw. hinzufügen, damit alles etwas besser aussieht, und schon sind wir fertig.

Sie werden feststellen, dass der Überschriftenabsatz angegeben wurde display: table-caption;, wodurch er sich wie eine Tabelle verhält <caption>und caption-side: bottom;aus Stilgründen angibt, dass sich die Überschrift am Ende der Tabelle befindet, obwohl sich das Markup <input>vor dem Element in der Quelldatei befindet. Dies bietet große Flexibilität.

Sie können dieses Beispiel auch in css-tables-example.html anzeigen (siehe auch den Quellcode ).

Hinweis: Das Tabellenlayout unterscheidet sich von anderen Themen auf dieser Seite und wird in diesem Modul aufgrund seiner älteren Anwendungen nicht weiter behandelt.

2.8 Mehrspaltiges Layout

Das CSS-Modul für mehrspaltiges Layout bietet uns die Möglichkeit, Inhalte in Spalten anzuordnen, ähnlich dem Textfluss in einer Zeitung . Das Auf- und Ablesen von Spalten ist in einer Webumgebung weniger nützlich, da der Benutzer nach oben und unten scrollen muss. Das Anordnen von Inhalten in Spalten kann jedoch eine nützliche Technik sein.

Um einen Block in einen mehrspaltigen Container umzuwandeln, können wir die Eigenschaft „column-count “ (die dem Browser mitteilt, wie viele Spalten wir haben möchten) oder die Eigenschaft „column-width “ (die dem Browser mitteilt, den Container mit so vielen Spalten zu füllen) verwenden Spalten als die angegebene Breite).

Im folgenden Beispiel <div>beginnen wir mit einem HTML-Block, der ein Element mit containereiner Klasse enthält.

<div class="container">
  <h1>Multi-column Layout</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
  </p>

  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem.
  </p>

  <p>
    Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris
    ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus
    viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum
    sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus.
  </p>
</div>

Wir verwenden für diesen Container eine Spaltenbreite von 200 Pixeln, sodass der Browser so viele Spalten mit 200 Pixeln wie möglich erstellt. Der verbleibende Platz zwischen den Spalten wird gemeinsam genutzt.

.container {
    
    
  column-width: 200px;
}

CSS-Layout (1)