Der Unterschied zwischen display:inline-block und float in CSS beim Anordnen von Elementen in einer Reihe

Während des Layouts müssen viele Elemente in einer Reihe angeordnet werden. Aus Sicht der Kompatibilität und Benutzerfreundlichkeit werden wir zunächst display:inline-block (display as inner) vorstellen Block) und Float (Float).

float: Float, Sie wissen, was es bedeutet, nachdem Sie den Namen gehört haben: Elemente schweben lassen und sich vom Dokumentenfluss lösen, um den Zweck zu erreichen, mehrere Elemente in einer Reihe anzuordnen. Was sind die Eigenschaften von schwebenden Elementen? Wie unten gezeigt:

1. unterstützt Breite und Höhe;

2. wird in einer Zeile angezeigt; >

3. Wenn die Breite nicht festgelegt ist, wird die Breite durch den Inhalt

4. verschoben angegebene Reihenfolge, bis die Grenze des schwebenden Elements oder Elternteils stoppt

5. Nachdem das Element schwebend ist, wird die Höhe des übergeordneten Elements des schwebenden Elements reduziert;
   bricht aus dem Dokumentenfluss ab;

6. Nachdem das Element schwebend ist, überlappen sich die oberen und unteren Ränder nicht mehr 🎜> löst BFC aus.

7. Inline-Block: Inline-Block, der die Eigenschaften von Inline- und Block-Elementen aufweist. Wie unten gezeigt:

8. unterstützt Breite und Höhe;

wird in einer Zeile angezeigt; > Codeumbrüche werden in Leerzeichen analysiert

1. Wenn die Breite nicht festgelegt ist, wird die Breite vom Inhalt unterstützt

2. Inline-; Elemente vom Typ Block haben standardmäßig unten eine Lücke.

3. Die oberen und unteren Ränder von Elementen vom Typ Inline-B überlappen sich nicht 🎜> löst BFC aus.

4. Aus den Eigenschaften dieser beiden Stile geht hervor, dass sie gleich sind: 1. Breite und Höhe unterstützen. 2. Anzeige in einer Zeile. 3. Wenn der Inhalt nicht vorhanden ist eingestellt, die Breite wird vom Inhalt unterstützt 7. Der obere und untere Rand überlappen sich nicht und 8. BFC wird ausgelöst. Durch die Anzeige dieser Funktion in einer Reihe werden die beiden Elemente bestimmt, die in einer Reihe angeordnet werden können. Um den Unterschied zu nutzen, müssen Sie dann mit der Analyse ihrer unterschiedlichen Merkmale beginnen:

5. Begrenzung der Anordnungsrichtung. Das vierte Merkmal von float bestimmt, dass es die Reihenfolge der Elemente bestimmen kann. float:left: Elemente werden von links nach rechts angeordnet, float:right: Elemente werden von rechts nach links angeordnet. Und display:inline-block kann nur von links nach rechts verwendet werden.

6. Ob man sich vom Dokumentenfluss lösen soll. Schwebende Elemente werden aus dem Dokumentfluss ausbrechen, display:inline-block jedoch nicht. Es wird also ein Phänomen auftreten: Wenn das erste Floating-Element oder Inline-Block-Element bereits eine Zeile belegt und margin-left:-100% zum zweiten Element hinzugefügt wird, deckt das zweite Floating-Element das zweite Floating-Element ab Das Element, der zweite Inline-Block, wird in einer neuen Zeile angezeigt und entsprechend dem Rand nach links verschoben.

7. Das schwebende Element wird auf die Höhe des übergeordneten Elements reduziert. Um den Höhenkollaps des übergeordneten Elements zu vermeiden, muss diese Funktion bei Verwendung von Float verarbeitet werden: Legen Sie die Höhe des übergeordneten Elements fest oder löschen Sie den Float

Inline-Block Es gibt einen Standardmäßig befindet sich am unteren Rand des Elements eine Lücke. Beim Erstellen von Webseiten müssen Sie die vertikale Ausrichtung festlegen: Vertical-Alignment, um Lücken zu beseitigen Die Auswirkungen von Leerzeichen erfordern: Schreiben Sie das Inline-Element in eine Zeile in der Struktur oder setzen Sie die Schriftgröße des übergeordneten Inline-Elements im Stil auf 0

1. Von der Die obige Differenzanalyse zeigt die Vor- und Nachteile von Float und Inline-Block: Nach dem Float müssen Sie in den meisten Fällen den Float löschen oder die Höhe festlegen. display:inline-block kann nur verwendet werden, ohne die Standardanordnung (von links nach rechts) zu ändern, und die untere Lücke sowie die durch Codeumbruch verursachten Leerzeichen links und rechts müssen gelöscht werden.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen display:inline-block und float in CSS beim Anordnen von Elementen in einer Reihe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!