Probleme mit CSS-Floating, Positionierung und dem Zusammenklappen des übergeordneten Containers

Wie soll ich es ausdrücken? Es ist drei Monate her, seit ich mit dem Frontend in Berührung gekommen bin. Nach so langer Zeit des Lernens ist mein Niveau immer noch durchschnittlich eine Zusammenfassung meines Verständnisses von Floating, Positionierung und einige Gedanken zum Spaltenlayout und zu Problemen beim Kollabieren übergeordneter Container.

Zunächst einmal sind Floating und Positionierung die Grundlage des Layouts in CSS. Durch Floating und Positionierung kann jedes Boxmodell auf Pixelebene genau gesteuert werden, was seine Bedeutung zeigt.

Lassen Sie uns zuerst über das Floating sprechen:

Im Dokumentobjektmodell von HTML wird ein flüssiges Layout übernommen, das heißt, die Elemente auf Blockebene befinden sich in einer exklusiven Zeile und Sie Wenn Sie möchten, dass die Elemente auf Blockebene nebeneinander angeordnet werden, gibt es zwei Hauptmethoden: Die eine besteht darin, die Anzeige von Elementen auf Blockebene in CSS auf „Inline-Block“ festzulegen. Oft ist die Verwendung dieser Methode jedoch nicht geeignet. Häufiger verwenden wir die Floating-Methode.

Float, es gibt zwei Haupttypen: float: left; und float: right; Floating kann dazu führen, dass Elemente auf Blockebene vom Standarddokumentfluss abweichen die definierte Richtung, bis es blockiert wird oder die Grenze des übergeordneten Containers erreicht. Wenn die verbleibende Breite der Zeile nicht ausreicht, verschiebt sich die schwebende Box zur nächsten Zeile. Floating bietet eine Lösung für die Implementierung des Seitenlayouts.

Was jedoch nicht ignoriert werden kann, ist, dass einfaches Floating manchmal unsere Anforderungen an das Schnittstellenlayout nicht erfüllen kann. Zu diesem Zeitpunkt spiegelt sich die Bedeutung der Positionierung wider. Die Positionierung kann in vier Typen unterteilt werden: relative (relative Positionierung), absolute (absolute Positionierung), feste (feste Positionierung) und statische. Wenn wir keine Positionierungsattribute auf ein Element anwenden, ist dies äquivalent zu statisch.

Wie versteht man also die relative Positionierung? Das Element (Box-Modell) mit relativer Positionierung weicht nicht vom Standarddokumentfluss ab. Sie können die oberen, linken, rechten und unteren Werte dafür festlegen, um eine Feinabstimmung des Elements (Box-Modells) relativ zu erreichen „Oben“ bedeutet, dass sich das Element relativ zur ursprünglichen Position nach unten bewegt (Sie können einen negativen Wert festlegen, was dem Festlegen eines positiven Werts „unten“ entspricht). „Links“ bedeutet, dass sich das Element relativ zu nach rechts bewegt seine ursprüngliche Position. Ebenso bewegt sich rechts nach links und unten nach oben.

Absolute Positionierung: Das Element mit angewendeter absoluter Positionierung wird aus dem Dokumentenfluss getrennt, als ob es nie existiert hätte. Zu diesem Zeitpunkt erfolgt seine Positionierung relativ zu seinem Vorgängerelement mit angewendeter relativer Positionierung. Und es hat auch eine sehr wichtige Funktion: Es wird entsprechend dem eingestellten Verschiebungswert „gekreuzt“. Das heißt, die Einstellungen für oben, links, rechts und unten beziehen sich auf die Grenzen des Vorgängerelements (Box). Wenn eine Verschiebungsrichtung festgelegt ist, bewegt sich das Element (Box) zunächst in dieser Richtung zur Grenze und dann relativ zur Grenze.

Feste Positionierung: Die feste Positionierung ist ebenfalls vom Standarddokumentfluss getrennt, erfolgt jedoch relativ zum Browserfenster und ändert sich nicht mit der Bewegung der Bildlaufleiste oder der Benutzeroberfläche. Sie kann auch oben oder links eingestellt werden , rechts, untere Werte.

Was das Spaltenlayout betrifft, verwende ich persönlich die folgenden Methoden:

1. Wenn das Layout in zwei Spalten unterteilt ist, können Sie für das Layout gleichzeitig Float auf die beiden Felder anwenden . Sie können die Breite oder den Breitenprozentsatz des linken und rechten Felds festlegen.

2. Es ist auch in zwei Spalten angeordnet. Sie können auch das linke schwebende Layout auf das Feld auf der linken Seite anwenden, die Positionierung auf das Feld auf der rechten Seite anwenden oder seinen Randwert auf „Position“ festlegen.

3. Für das dreispaltige Layout ist es am besten, die Boxen auf der linken und rechten Seite schweben zu lassen und den linken und rechten Rand des mittleren Elements (Box) festzulegen ), um eine Positionierung zu erreichen.

Es muss verstanden werden, dass die große Initiative des Floating dazu führen kann, dass der übergeordnete Container zusammenbricht. Das heißt, wenn alle Elemente im Container schweben (was dazu führt, dass die Höhe des übergeordneten Containers Null ist). ) oder die internen Elemente nicht ausreichen, um den übergeordneten Container zu unterstützen, ist die Höhe des übergeordneten Containers 0 oder reicht nicht aus, um unsere Anforderungen an das Seitenlayout zu erfüllen. Dann müssen wir uns einige Lösungsmöglichkeiten überlegen Dieses Problem. Ich habe mehrere Möglichkeiten:

1. Legen Sie eine Höhe für den übergeordneten Container fest

2. Stellen Sie den Überlauf des übergeordneten Containers ein: versteckt oder Überlauf: automatisch;

overflow:hidden;
overflow:auto;

3. Setzen Sie das übergeordnete Element auf Float (nicht empfohlen)

4. Setzen Sie das leere Element darauf (Clearfix: beides)

5. Wenden Sie den folgenden Stil auf das übergeordnete Element an:

Zusammenfassend lässt sich sagen, dass Floating und Positionierung häufig nur dann zusammen verwendet werden, wenn Können wir zusammen die Wirkung erzielen, die wir brauchen?

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}

Das Obige sind einige meiner kleinen Erfahrungen zur CSS-Positionierung und zum Floating in dieser Zeit. Ich hoffe, Sie können mich darauf hinweisen, damit wir alle gemeinsam Fortschritte machen können Um dies zusammenzufassen: Ich habe viele Dokumente von großen Leuten gelesen, also viele ihrer Meinungen übernommen, einige meiner eigenen Erkenntnisse zum Ausdruck gebracht und gleichzeitig mein Verständnis des damit verbundenen Wissens vertieft. Ich hoffe, dass alle an der Front-End-Straße zusammenarbeiten und jeden Tag Fortschritte machen!

Bei weiteren CSS-Floating-, Positionierungs- und Kollapsproblemen des übergeordneten Containers beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!