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!