Beispielcode zum Mischen von Float und Margin in CSS

Bei meinen letzten Studien habe ich einige Layout-Übungen auf GitHub gefunden und festgestellt, dass ich mit dem Layout überhaupt nicht vertraut bin (sehr unangenehm).

In meinen früheren Studien dachte ich, dass die Verwendung von CSS in Ordnung sei, solange ich mich an die Funktionen der einzelnen Attributs erinnere, aber was ist damit? Es ist wirklich peinlich. Mehr verrate ich nicht, es ist zu traurig, kommen wir zur Sache!

Ich habe in letzter Zeit mit Float- und Margin-Layouts gearbeitet und dadurch mein Verständnis für die gemeinsame Verwendung dieser beiden Layouts deutlich vertieft. (Neue Studierende können einen Blick darauf werfen, Experten bitte ignorieren)

Die Float-Eigenschaft

Float: links | rechts | keine | erben

Am häufigsten werden natürlich die ersten beiden verwendet: links schwebend und rechts schwebend

Die wichtigste Funktion des Floatings: die Etikettenentfernung.

Es weicht vom Standardablauf ab und befindet sich auf einer fortgeschritteneren Ebene, was sich auf das Layout des übergeordneten Elements und der nachfolgenden Elemente auswirkt. Ich werde hier nicht näher darauf eingehen.

Margin-Eigenschaft

Hier sprechen wir hauptsächlich über den linken und rechten Rand

margin-left: Legt den linken Rand eines Elements fest.
margin-right: Legt den rechten Rand eines Elements fest.

Im Allgemeinen ist es einfach, die wörtliche Bedeutung dieser beiden Attribute zu verstehen, aber je einfacher die Dinge sind, desto weniger sollten Sie sie unterschätzen.

Wichtige Punkte

Der folgende Code:

html:

<div Klasse="Box">
    <div Klasse="zi_box1">1</div>
    <div Klasse="zi_box2">2</div>
    <div Klasse="zi_box3">3</div>
    <div Klasse="klar"></div>
</div>

CSS:

.Kasten {
            Hintergrundfarbe: #555555;
            Breite: 600px;
            Höhe: 200px;
        }
        .zi_box1 {
            schweben: links;
            Hintergrundfarbe: #c23232;
            Breite: 200px;
            Höhe: 100px;
        }
        .zi_box2 {
            schweben: links;
            Hintergrundfarbe: Chartreuse;
            Breite: 200px;
            Höhe: 100px;
        }

        .zi_box3 {
            schweben: links;
            Hintergrundfarbe: blau;
            Breite: 200px;
            Höhe: 100px;
        }
        .klar {
            klar: beides;
        }

Das endgültige Effektdiagramm:

Die drei untergeordneten Boxen füllen die übergeordnete Box, ihre Breite kann jedoch innerhalb der übergeordneten Box gestreckt werden.

Was passiert, wenn die übergeordnete Box nicht erweitert werden kann?

Erhöhen Sie die Breite einer Unterbox, Box Nummer 3

zi_box3 {
    Breite: 300px;
}

Das Wirkungsdiagramm sieht wie folgt aus:

Dann beginnt das dritte Feld in einer separaten Zeile.

Bei Verwendung in Verbindung mit margin

Basierend auf dem ersten Code, fügen Sie einen Randwert hinzu

zi_box1 {
    Rand links: 20px;
}

Da zu diesem Zeitpunkt die Breite der drei Felder plus der Randwert größer ist als die Breite des übergeordneten Felds, wird bei Feld 3 eine neue Zeile begonnen.

Wenn im Gegenteil für Feld 3 ein Randwert festgelegt ist und für Feld 1 und Feld 2 kein Rand festgelegt ist, beginnt Feld 3 dann auch in einer separaten Zeile? Die Antwort ist ja, da ihre Breite den Wert der übergeordneten Box überschritten hat.

Implementierung eines dreispaltigen Layouts

Wie kann die Reihenfolge Box 3, Box 1, Box 2 erstellt werden, ohne die DOM-Reihenfolge zu ändern? Können wir das Margin-Attribut voll ausnutzen? Ich war am Anfang ein Idiot (ich übe selten Layout, also kritisieren Sie mich bitte nicht, ich bin nur ein Anfänger)

Idiotencode

.zi_box1 {
     Rand links: 200px;       
}
.zi_box2 {
     Rand links: 200px;       
}

.zi_box3 {
     Rand0links: -400px;
}
//Es ist eine naive Vorstellung, dass jedes Element unabhängig agiert

Das Wirkungsdiagramm wie folgt geschrieben:

Ich war damals fassungslos, was zur Hölle war das.

Aber bei der abschließenden Untersuchung kenne ich den Grund: Das Wichtigste ist die Ausführungsreihenfolge von DOM.

Der Grund hierfür ist: Zuerst wird Box 1 analysiert, Rand links: 200px, also geht Box 3 in die zweite Zeile; dann wird Box 2 analysiert, Rand links: 200px, also geht Box 2 auch in die zweite Zeile, weil die erste Zeile bereits 600px breit ist. Lassen Sie uns abschließend Box 3 mit dem linken Rand von -400 Pixeln analysieren. Die Box wird 400 Pixel nach vorne verschoben, was den folgenden Effekt hat.

Diese Denkweise bedeutet, das Gesamtbild statt des Gesamtbildes zu berücksichtigen.

Endgültiger Code zur Implementierung des dreispaltigen Layouts

.zi_box1 {
     Rand links: 200px;       
}
.zi_box2 {
     Rand links: 0px;      
}

.zi_box3 {
     Rand0links: -600px;
}

Rendern

Man kann es einfach so verstehen

Wenn sich Box 1 um 200 Pixel nach rechts bewegt, bewegen sich Box 2 und Box 3 ebenfalls um 200 Pixel nach rechts. Das spezifische Effektdiagramm ist wie folgt

Wenn also Box 3 nach vorne verschoben wird, ist dann ein Abstand von 600 Pixeln erforderlich? (Ist das nicht leicht zu verstehen? Hehe) Dies ist natürlich nur mein teilweises Verständnis und es ist nicht ganz richtig.

Dann sind float: right und margin-right identisch.

Zusammenfassen

Dies ist das Ende dieses Artikels über die gemischte Verwendung von Float und Margin in CSS. Weitere relevante Inhalte zur gemischten Verwendung von CSS Float und Margin finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!