ATOZ CSS Schneller Tipp: Schwimmen und klare und zentrierende Elemente

SitePoint Premium -Mitgliedschaft Exklusiv: Complete ATZ: CSS -Serie -Tutorials!

Laden Sie den Player… Willkommen in unseren Tutorials der ATOZ CSS -Serie! In dieser Reihe von Tutorials werden wir verschiedene CSS -Werte (und Eigenschaften) untersuchen, die mit verschiedenen Buchstaben im Alphabet beginnen. In diesem Artikel habe ich einen kurzen Tipp/einen Kurs zu Float and Clear Attributen und verschiedenen Element -Zentriermethoden hinzugefügt.

f steht für float and clear

schweben ist nützlich, wenn Sie Elemente links oder rechts auf der Seite verschieben möchten. Leider können Sie float: center nicht verwenden, um das Element zu zentrieren. Ist es nicht sehr problematisch? Machen Sie sich keine Sorgen, hier sind die Methoden zur Zentrierung verschiedener Elemente.

Technik 1

Wenn das Element ein Element auf Blockebene ist, können Sie width und margin: auto in Kombination verwenden. margin: auto berechnet automatisch die Ränder auf der linken und rechten Seite, um sie gleich zu machen, wodurch das Blockelement innerhalb seines Containerelements zentriert wird. Schauen Sie sich das Beispiel an, das von SitePoint (@sinepoint) auf CodePen: tip-margin-auto geschrieben wurde.

Technik 2

Wenn das Element ein Inline- (oder Inline -Block-) Element ist, verwenden Sie text-align: center in seinem übergeordneten Container. Schauen Sie sich das Beispiel von SitePoint (@sinepoint) auf CodePen: tip-flexBox an.

Technik 3

Wenn das Element absolut positioniert ist, verwenden Sie left und transform, um das Element horizontal zu zentrieren. Schauen Sie sich das Beispiel von SitePoint (@sinepoint) auf CodePen: tip-flexBox an.

Ähnliche Techniken können auch für vertikale Zentrierelemente verwendet werden, aber mehr werden in den zukünftigen Tipps eingeführt!

Technik 4

Verwenden Sie Flexbox (ein anderes "F" -attribut, großartig!), Um ein einzelnes Projekt (oder Projektgruppe) zu zentrieren, zwei Eigenschaften auf dem Containerelement festlegen: display: flex und justify-content: center. Schauen Sie sich das Beispiel von SitePoint (@sinePoint) auf CodePen: tip-flexbox an.

Flexbox verfügt über viele andere coole Funktionen, darunter wachsende oder schrumpfende Behälterelemente, um den verfügbaren Platz am besten zu nutzen. Sie können Elemente sogar vertikal und horizontal gleichzeitig ohne Verwendung von Block- und Inline-Elementen ausrichten, die die vertikale bzw. horizontale Ausrichtung bestimmen. Ein weiterer Vorteil der Verwendung von Flexbox besteht darin, dass es nicht mehr das Problem der Containerfaltung und der Verwendung einer ClearFix -Lösung mehr gibt.

häufig gestellte Fragen zum CSS Float und Clear

Was ist der Zweck des Float -Attributs in CSS?

Mit dem

-attribut im float css wird ein Element nach links oder rechts gedrückt, sodass andere Elemente es umgeben können. Dies ist ein leistungsstarkes Tool, mit dem ein ganzes Weblayout oder bestimmte Teile einer Webseite erstellt werden kann, z. B. das Einpacken von Text um ein Bild. Es ist jedoch zu beachten, dass schwimmende Elemente aus dem normalen Prozess der Webseite entfernt werden. Wenn dies nicht ordnungsgemäß verwaltet wird, kann dies manchmal zu unerwarteten Layout -Ergebnissen führen.

Wie zentrieren Sie schwimmende Elemente in CSS?

zentrierende schwimmende Elemente in CSS können etwas schwierig sein, da das float -attribut selbst keine zentrale Ausrichtung unterstützt. Es gibt jedoch einige Problemumgehungen, um dies zu erreichen. Ein allgemeiner Ansatz ist die Verwendung eines Wrapper- oder übergeordneten Elements mit einer bestimmten Breite und einem Rand auf auto. Ein weiterer Ansatz ist die Verwendung von Flexbox- oder Gitterlayouts, die mehr Kontrolle über die Projektausrichtung und die Raumzuweisung in Behältern bieten.

Was ist die Funktion des klaren Attributs in CSS?

Das

-attribut in clear CSS wird mit dem Attribut float verwendet. Es gibt an, welche Seiten des Elements nicht schweben dürfen. Die Werte des clear -attributs sind none, left, right, both, inherit und

. Diese Eigenschaft wird normalerweise verwendet, um Elemente von umgebenden schwimmenden Elementen zu verhindern.

Warum sind meine schwebenden Elemente nicht richtig ausgerichtet?

Wenn Ihre schwebenden Elemente nicht wie erwartet ausgerichtet sind, kann dies aus mehreren Gründen liegen. Ein häufiges Problem ist, dass die Gesamtbreite des schwimmenden Elements (einschließlich Ränder, Füllungen und Grenzen) die Breite seines Containerelements überschreitet. Ein weiteres Problem kann sein, dass nicht alle Elemente in die gleiche Richtung schweben. Denken Sie auch daran, dass schwimmende Elemente aus dem normalen Fluss des Dokuments entfernt werden, was manchmal zu unerwarteten Ergebnissen führen kann.

Wie kann man in CSS schweben?

clear Sie können das Attribut clear verwenden, um in CSS zu schweben. Dies ist normalerweise erforderlich, wenn der Behälter schwimmende Elemente enthält und Sie nicht möchten, dass andere Elemente im Behälter schwimmende Elemente umgeben. Sie können den Float löschen, indem Sie am Ende des Containers ein neues Element hinzufügen und das Attribut clear auf "beide" festlegen. Alternativ können Sie einen ClearFix-Hack verwenden, bei dem ein Pseudo-Element mit einem

-attribut auf den Container selbst angewendet wird.

Kann ich das Float -Attribut mit Flexbox- oder Gitterlayout verwenden?

float Obwohl Sie das Attribut float mit Flexbox oder Grid -Layout technisch verwenden können, wird dies nicht empfohlen. Dies liegt daran, dass die Flexbox- und Gitterlayouts ihren eigenen Mechanismus bieten, um Elemente in Containern auszurichten und Raum zuzuweisen, was dem Verhalten des float -attributs in Konflikt steht. Wenn Sie Flexbox- oder Gitterlayouts verwenden, ist es besser, ihre Eigenschaften anstelle von

zu verwenden.

Was sind einige Alternativen zur Verwendung des CSS -Float -Attributs?

float Während das Attribut

ein leistungsstarkes Tool in CSS ist, gibt es einige Alternativen, die mehr Kontrolle und Flexibilität bieten. Dazu gehören Flexbox, Gitterlayout und CSS -Positionierung. Flexbox ermöglicht eine einfache Ausrichtung und Zuweisung von Platz für Projekte in Containern, während die Netzlayouts für komplexe 2D -Layouts hervorragend sind. Die CSS -Positionierung kann auch verwendet werden, um das Layout jedes Elements zu steuern.

Wie wirkt sich das Float -Attribut auf den Fluss des Dokuments aus?

Wenn das Element schwimmt, wird es aus dem normalen Fluss des Dokuments entfernt und sich so weit wie möglich nach links oder rechts bewegen. Andere Elemente im Dokument fließen um das schwimmende Element. Dies kann manchmal zu unerwarteten Ergebnissen führen, insbesondere wenn das schwimmende Element breiter ist als sein Containerelement oder wenn mehrere schwimmende Elemente mit unterschiedlichen Breiten vorhanden sind.

Kann ich das Element in die Mitte schweben?

Das

-attribut in float in CSS unterstützt keine zentrale Ausrichtung. Es ermöglicht es Elementen, nur nach links oder rechts zu schweben. Sie können jedoch einen ähnlichen Effekt erzielen, indem Sie ein Wrapper oder ein übergeordnetes Element mit einer angegebenen Breite und einem Rand auf auto verwenden. Alternativ können Sie Flexbox- oder Rasterlayouts verwenden, die mehr Kontrolle über die Ausrichtung bieten.

Was passiert, wenn ich den Schwimmer nicht lösche?

Wenn Sie den Schwimmer nicht löschen, kann dies zu unerwarteten Layout -Ergebnissen führen. Wenn das übergeordnete Element beispielsweise nur schwimmende Elemente enthält, kann es zusammenbrechen, da das schwimmende Element aus dem normalen Fluss des Dokuments entfernt wurde. Andere Elemente im Dokument können auch schwimmende Elemente auf eine Weise umgeben, die Sie nicht erwarten würden. Daher ist es normalerweise am besten, den Schwimmer bei Bedarf zu löschen.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Schwimmen und klare und zentrierende Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!