HTML ist eine Markupsprache, die zum Erstellen von Webseiten verwendet wird. Es besteht aus verschiedenen Elementen, die helfen, den Inhalt und die Struktur der Seite zu organisieren. Die Möglichkeit, ein Element wegzulassen, kann in vielen Fällen nützlich sein, z. B. wenn Sie Elemente in andere Elemente einfügen oder die Reihenfolge der Elemente auf der Seite ändern möchten.
Sie können ein Element in HTML mit mehreren Eigenschaften und Methoden weglassen. Eine Möglichkeit besteht darin, die CSS-Eigenschaft zu verwenden margin. Mit dieser Eigenschaft können Sie die Einrückung zwischen Elementen festlegen und das Element um eine bestimmte Anzahl von Pixeln nach unten oder nach oben senken.
Sie können einen positiven Einrückungswert verwenden, um ein Element von unten zu senken. Wenn Sie beispielsweise einen Wert festlegen margin-top: 20px für das Element wird es um 20 Pixel relativ zur oberen Grenze seines übergeordneten Elements weggelassen. Wenn Sie einen Wert angeben margin-bottom: 20px Das Element wird um 20 Pixel relativ zum unteren Rand seines übergeordneten Elements weggelassen.
Sie können auch die CSS-Eigenschaft verwenden padding um ein Element innerhalb seines übergeordneten Elements zu senken. Da diese Eigenschaft die Einrückung zwischen dem Inhalt des Elements und seinen Grenzen angibt, können Sie einen Wert verwenden padding-top oder padding-bottom um das Element entsprechend nach oben oder unten zu senken.
Bestimmen der Position eines Elements
In HTML können Sie die Position eines Elements mithilfe verschiedener Attribute und Eigenschaften definieren.
Eine Möglichkeit, die Position eines Elements zu bestimmen, besteht darin, die CSS-Eigenschaft "position" zu verwenden. Mit dem Wert "absolute" kann ein Element relativ zum übergeordneten Element oder zu seinen benachbarten Elementen positioniert werden. Verwenden Sie die Eigenschaften "top", "bottom", "left" und "right", um bestimmte Positionen in CSS festzulegen.
Eine andere Möglichkeit, die Position eines Elements zu bestimmen, ist die Verwendung einer Tabelle. Kennung
erstellt eine Tabelle mit Zellen, die mit den Attributen "rowspan" und "colspan" positioniert werden können. Beispielsweise können Sie mit dem Attribut "rowspan" angeben, dass eine Zelle mehrere Zeilen belegen soll, und mit dem Attribut "colspan" angeben, dass die Zelle mehrere Spalten belegen soll.
Sie können auch die CSS-Eigenschaften "display" und "float" verwenden, um die Position eines Elements zu bestimmen. Der Wert "inline" der Eigenschaft "display" ermöglicht es einem Element, sich im Text zu befinden und nur den Bereich zu belegen, den es einnimmt. Der Wert "block" macht das Element zu einem Block, wodurch es die gesamte verfügbare Breite einnehmen kann. Mit der Eigenschaft "float" können Sie ein Element links oder rechts relativ zu anderen Elementen ausrichten.
Die Bestimmung der Position eines Elements ist ein wichtiger Teil des Erstellens einer Webseite, mit dem Sie die Position der Elemente steuern und interessante Markups erstellen können.
Grundlegende Konzepte und Begriffe
Element - Dies ist der Teil der Webseite, der durch öffnende und schließende Tags gekennzeichnet ist.
Kennung Dies sind die Symbole, die ein Element umrahmen und dessen Typ und Eigenschaften definieren.
Einrückung ist ein Leerzeichen oder Einzug, der vor dem Inhalt des Elements hinzugefügt wird, um eine visuelle Trennung zwischen den Elementen zu erstellen.
Die Klasse ist ein Elementattribut, mit dem Sie bestimmte Stile festlegen oder JavaScript mit ihm verknüpfen können.
ID ist ein Elementattribut, das eine eindeutige ID für ein Element bereitstellt und es Ihnen ermöglicht, von JavaScript oder CSS darauf zuzugreifen.
Attribut - Dies sind zusätzliche Informationen, die einem Element hinzugefügt werden, um seine Eigenschaften oder sein Verhalten festzulegen.
Verschachtelung - dies ist eine Situation, in der sich ein Element in einem anderen Element befindet.
Blockelement - Dies ist ein Element, das standardmäßig die gesamte verfügbare Breite einnimmt und einen neuen Block startet.
Inline-Element - dies ist ein Element, das nur die erforderliche Breite einnimmt und keinen neuen Block startet.
Liste ist ein geordneter oder ungeordneter Satz von Elementen.
Geordnete Liste - Dies ist eine Liste, in der die Elemente in der Reihenfolge nummeriert sind.
-
Beispiele für geordnete Listen-Tags:
Ungeordnete Liste - Dies ist eine Liste, in der Elemente mit Symbolen oder Bildern gekennzeichnet sind.
-
Beispiele für ungeordnete Listen-Tags:
Element absenken - es wird ein Element auf der Seite nach unten verschoben, wobei seine relative Reihenfolge beibehalten wird.
Wie finde ich die aktuelle Position eines Elements
Sie können die Eigenschaften offsetTop und offsetLeft verwenden, um die aktuelle Position eines Elements auf einer Webseite zu finden.
Die offsetTop-Eigenschaft gibt den vertikalen Abstand vom oberen Ende des übergeordneten Elements zum aktuellen Element zurück. Wenn der Wert beispielsweise 50 Pixel beträgt, bedeutet dies, dass das Element 50 Pixel vom oberen Ende des übergeordneten Elements entfernt ist.
Die offsetLeft-Eigenschaft gibt den horizontalen Abstand vom linken Rand des übergeordneten Elements zum aktuellen Element zurück. Wenn der Wert beispielsweise 100 Pixel beträgt, liegt das Element 100 Pixel vom linken Rand des übergeordneten Elements entfernt.
Sie können JavaScript verwenden, um die aktuelle Position eines Elements abzurufen. Zum Beispiel:
var element = document.getElementById("myElement"); // Получаем элемент по его idvar topPosition = element.offsetTop; // Получаем вертикальную позицию элементаvar leftPosition = element.offsetLeft; // Получаем горизонтальную позицию элементаconsole.log("Текущая позиция элемента (верх): " + topPosition + "px");console.log("Текущая позиция элемента (лево): " + leftPosition + "px");Die resultierenden Positionswerte des Elements werden in Pixeln relativ zum übergeordneten Element ausgedrückt.
Verwenden eines negativen Margin-Top-Werts
In HTML ist es möglich, den negativen Wert der margin-top-Eigenschaft zu verwenden, um ein Element wegzulassen. Wenn Sie beispielsweise ein Element um einen bestimmten Abstand zu seiner ursprünglichen Position nach oben verschieben möchten, können Sie einen negativen Wert auf die Eigenschaft margin-top anwenden.
Ein negativer Margin-top-Wert ermöglicht es, ein Element außerhalb seiner ursprünglichen Position nach oben zu verschieben. Dies ist besonders nützlich, wenn Sie ein Element kompakter machen oder es mit anderen Elementen ausrichten müssen.
Die Verwendung eines negativen Margin-Top-Werts kann jedoch zu unerwarteten Ergebnissen führen, insbesondere wenn sich Elemente überlappen oder die Gesamtstruktur der Seite gestört ist. Daher ist es wichtig, solche Änderungen mit der korrekten Verwendung anderer CSS-Eigenschaften zu kombinieren und die Verwendung negativer Werte mit Vorsicht zu genießen.
Zum Beispiel können Sie einen negativen Margin-Top-Wert auf ein Element anwenden, so dass sein Oberteil die Elemente daneben teilweise überlappt oder um ein interessantes Design zu erstellen.
| Element vor dem Einsatz von Margin-top | Element nach der Anwendung von Margin-top |
In diesem Beispiel wird das Element mit einem negativen Margin-Top-Wert nach oben verschoben. Dies ermöglicht Ihnen, einzigartige und kreative Designeffekte zu erstellen.
Verwenden der Elementpositionierung
Sie können die CSS-Eigenschaft verwenden, um ein Element auf einer Webseite wegzulassen position. Mit dieser Eigenschaft können Sie die Position eines Elements relativ zu seiner normalen Position im Dokument steuern. Es gibt mehrere Werte, die Sie für diese Eigenschaft festlegen können:
- static: das Element ist standardmäßig positioniert und ändert seine Position nicht.
- relative: das Element wird relativ zu seiner ursprünglichen Position positioniert. Dadurch wird der Platz belassen, den das Element vor der Positionierung eingenommen hat.
- absolute: das Element wird relativ zu seinem am nächsten positionierten übergeordneten Element positioniert (falls vorhanden), andernfalls relativ zum Browserfenster selbst.
- fixed: das Element wird relativ zum Browserfenster positioniert und bleibt auch beim Scrollen auf der Seite an seinem Platz.
Sie können die Eigenschaft verwenden, um ein Element auf der Seite nach unten zu senken top Gibt den Einzug vom oberen Rand des Elements an. Wenn Sie beispielsweise ein Element um 20 Pixel nach unten senken möchten, können Sie Folgendes festlegen top: 20px;. Sie können auch Eigenschaften verwenden bottom, left und right um die Einrückung von anderen Seiten eines Elements zu definieren.
Um den Titel beispielsweise um 30 Pixel nach unten zu senken, können Sie die folgenden Stile hinzufügen:
Der Titel wird nun unterhalb seiner normalen Position um 30 Pixel angezeigt. Dies kann nützlich sein, wenn Sie einen Einzug erstellen oder Elemente auf einer Seite in einer bestimmten Komposition anordnen möchten.
Ausrichten von Elementen mit Flexbox
Um flexbox zu verwenden, müssen Sie die Eigenschaft display: flex für das übergeordnete Element festlegen; . Danach werden alle untergeordneten Elemente zu Flex-Elementen und Sie können ihnen verschiedene Ausrichtungseigenschaften und -positionen zuweisen.
Eigenschaft justify-content legt die horizontale Ausrichtung von Elementen im Container fest. Damit können Sie Elemente links, zentriert oder rechts platzieren oder sie gleichmäßig über den Container verteilen. Zum Beispiel justify-content: center; richtet die Elemente in der Mitte aus und justify-content: space-between; verteilt die Elemente gleichmäßig mit gleichem Abstand zwischen ihnen.
Eigenschaft align-items legt die vertikale Ausrichtung der Elemente fest. Damit können Sie Elemente oben, in der Mitte oder unten ausrichten oder sie gleichmäßig vertikal verteilen. Zum Beispiel align-items: flex-start; richtet Elemente oben aus, während align-items: center; zentriert ist.
Flex-Wrap-Eigenschaft bestimmt, ob Elemente in eine neue Zeile umbrochen werden sollen, wenn sie nicht in derselben Containerzeile platziert werden. Standardmäßig versuchen alle Elemente, in eine Zeile zu passen. Wenn Sie flex-wrap: wrap; festlegen, werden die Elemente nach Bedarf in eine neue Zeile verschoben.
Flex-direction-Eigenschaft bestimmt die Richtung, in der Elemente im Container angezeigt werden. Der Wert von flex ist direction: row; ordnet Elemente in einer Zeile an (Standardeinstellung) und flex ist direction: column; ordnet Elemente in einer Spalte an.
| Eigenschaft | Bedeutung | Die Beschreibung |
|---|---|---|
| justify-content | flex-start | Ausrichten von Elementen am linken Rand des Containers |
| justify-content | flex-end | Ausrichten von Elementen am rechten Rand des Containers |
| justify-content | center | Ausrichten von Elementen in der Mitte des Containers |
| justify-content | space-between | Gleichmäßige Verteilung der Elemente mit gleichem Einzug zwischen den Elementen |
| align-items | flex-start | Ausrichten von Elementen am oberen Rand des Containers |
| align-items | flex-end | Ausrichten von Elementen am unteren Rand des Containers |
| align-items | center | Ausrichten von Elementen in der Mitte des Containers |
| flex-wrap | nowrap | Alle Elemente werden in einer Zeile platziert |
| flex-wrap | wrap | Elemente werden in eine neue Zeile verschoben |
| flex-direction | row | Position der Elemente in einer Zeile (Standard) |
| flex-direction | column | Positionieren von Elementen in einer Spalte |
Flexbox ist ein leistungsfähiges Werkzeug zum Erstellen flexibler und anpassungsfähiger Layouts. Es ermöglicht eine einfache Steuerung der Ausrichtung und Anordnung von Elementen in einem Container. Verwenden Sie es, um moderne und schöne Layouts Ihrer Webseiten zu erstellen.
Ändern der Reihenfolge von Elementen mit order
In HTML5 und CSS3 wurde eine order-Eigenschaft eingeführt, mit der Sie Elemente auf einer Webseite mithilfe von Flexbox neu anordnen können.
Um die order-Eigenschaft zu verwenden, müssen Sie zuerst einen Flexcontainer erstellen. Dazu wird die Eigenschaft display: flex verwendet. Zusätzlich dazu müssen Sie jedem Element eine order-Eigenschaft hinzufügen, um ihre neue Reihenfolge zu definieren.
Der Wert der order-Eigenschaft ist eine ganze Zahl und ist standardmäßig für alle Elemente im Container 0. Je kleiner der order-Wert ist, desto früher wird das Element in der Reihenfolge angezeigt.
| Element | order |
|---|---|
| Element 1 | 1 |
| Element 2 | 0 |
| Element 3 | 2 |
In dieser Tabelle werden die Elemente in der Reihenfolge 2, 1, 3 auf der Webseite angezeigt. Dies liegt daran, dass bei Element 2 der order-Wert 0 ist, bei Element 1 1 und bei Element 3 2.
Mit der order-Eigenschaft können Sie Elemente auf einer Webseite leicht neu anordnen, ohne den HTML-Code ändern zu müssen.
Beispiele für die Verwendung verschiedener Methoden
Es gibt mehrere Möglichkeiten, ein Element in HTML wegzulassen. Betrachten wir einige Beispiele:
| Methode | Die Beschreibung |
|---|---|
| margin-top | Verwenden Sie die CSS-Eigenschaft margin-top, um einem Element einen oberen Einzug hinzuzufügen. |
| padding-top | Verwenden Sie die CSS-Eigenschaft padding-top, um dem Element einen oberen inneren Einzug hinzuzufügen. |
| position: relative; top | Verwenden Sie die CSS-Eigenschaften position: relative und top, um ein Element relativ zu seiner ursprünglichen Position zu versetzen. |
| display: flex; align-items: flex-start; | Verwenden Sie die CSS-Eigenschaften display: flex und align-items: flex-start, um das Element am oberen Rand des Containers auszurichten. |
| transform: translateY() | Verwenden Sie die CSS-Eigenschaft transform: translateY(), um ein Element vertikal zu verschieben. |
Die Auswahl einer bestimmten Methode hängt vom gewünschten Ergebnis und den Layouteigenschaften ab.
