Verwenden von CSS zum Platzieren von HTML-Elementen

• April 26, 2024

Mit CSS-Regeln können Sie HTML-Elemente genau dort platzieren, wo Sie sie möchten. Sie können einstellen, wie sie auf andere Elemente reagieren, die um sie herum sitzen, oder sie sogar vollständig ausblenden. Hier ist eine Aufschlüsselung der CSS-Placement-Eigenschaften.

Anzeige: Diese Eigenschaft definiert, wie ein Element angezeigt wird. Wenn Sie die Anzeige auf "Keine" setzen, wird das Element vollständig ausgeblendet, während andere Werte die Reaktion eines Elements auf andere Eigenschaften und Elemente ändern können. Divs werden beispielsweise standardmäßig als "Block" angezeigt, was bedeutet, dass sie als rechteckiges Objekt fungieren. Sie können jedoch "display: inline" verwenden, um ein Div zu zwingen, stattdessen wie ein Absatz zu agieren. Oder Sie können das Gegenteil tun und "display: block" verwenden, um einen Absatz zu zwingen, sich wie ein div zu verhalten.

Position: Definiert, wie ein Element auf die Elemente um es herum reagiert. Elemente verwenden standardmäßig "position: static", dh, sie werden in der Reihenfolge angezeigt, in der sie im HTML-Code erscheinen. "Position: relativ" bedeutet, dass die statische Position des Elements berechnet und dann um das versetzt wird, was Sie in den Eigenschaften "oben" und "links" angeben. Die anderen Seitenelemente verhalten sich so, als befände sich das relative Element noch an seiner statischen Position. "Position: Absolut" -Elemente ignorieren ihre statische Position und basieren ihre Position ausschließlich auf den Werten in den Eigenschaften "Oben", "Links", "Rechts" und "Unten". Darüber hinaus ignorieren andere Elemente dieses Element (wenn Sie also nicht aufpassen, können Sie mit einigen unordentlichen Überlappungen enden). "Position: fest" ist ähnlich wie "Position: absolut", außer dass das Element seinen Platz behält, auch wenn Ihr Besucher die Seite scrollt.

Sichtbarkeit: Legt fest, ob ein Element auf der Seite angezeigt wird oder nicht. Der Unterschied zwischen "display: none" und "visible: hidden" besteht darin, dass sich die anderen Seitenelemente im ersten Fall so verhalten, als ob das unsichtbare Objekt nicht vorhanden wäre. In letzterem Fall nehmen andere Elemente einen Platz für das ausgeblendete Element ein. Offensichtlich ist die Standardeinstellung "sichtbar".

Float: Legt fest, ob ein Element links oder rechts von anderen Elementen kaskadiert (oder überhaupt nicht, was die Standardeinstellung ist). Diese Eigenschaft ist äußerst hilfreich, um relative Elemente richtig zu positionieren. Sie müssen eine Breite für schwebende Elemente festlegen, da diese sonst nicht korrekt angezeigt werden. Wenn Sie float für ein Element verwenden, möchten Sie die Eigenschaft wahrscheinlich auch für alle umliegenden Elemente festlegen.

Klar: Diese Eigenschaft funktioniert in Verbindung mit der Eigenschaft "float". Es entscheidet, wie das Element andere Elemente um es herum schweben lässt. "Clear: left" bedeutet, dass keine anderen Elemente nach links schweben können. "clear: right" blockiert die rechte Seite und "clear: both" bedeutet, dass keine Elemente zu beiden Seiten schweben können. Die Standardeinstellung ist "clear: none" (dh andere Elemente können zu beiden Seiten schweben).

Video-Anleitungen: float - positionieren/ ausrichten in CSS Tutorial | CSS lernen für Anfänger deutsch (April 2024).