Erfahren Sie mehr über Float und Inline-Block

Dieser Artikel führt hauptsächlich in ein tiefgreifendes Verständnis von Float und Inline-Block ein und analysiert sie unter den Aspekten der Kompatibilität und Auswirkung auf übergeordnete Elemente. Er wird Freunden als Referenz empfohlen

Meine Arbeit war in letzter Zeit relativ entspannt, daher habe ich meine eigene Canvas-Bibliothek geschrieben. Ich habe keine guten Kenntnisse, um einen Blog zu schreiben, also habe ich stagniert Ich habe beschlossen, heute etwas Zeit damit zu verbringen, einen CSS-Blogbeitrag zu schreiben. Ich habe diese beiden Jungs zufällig getroffen, als ich kürzlich die Benutzeroberfläche für das Projekt geschrieben habe ... Also lasst uns mit allen ein halbwegs ausführliches Verständnis haben
Zuallererst Kompatibilität

Wenn Sie float verwenden, müssen Sie sich keine Sorgen machen, dass es mit allen Browsern kompatibel ist. Es ist ein sehr altes Attribut

Inline-Block kann nur in IE8 oder höher verwendet werden (einschließlich 8). Tatsächlich verfügt IE5.5 bereits über Inline-Block, aber die Implementierung ist anders, wenn Sie kompatibel sein möchten mit niedrigeren IE-Versionen können Sie nur zusätzlichen Code verwenden

Der Code lautet wie folgt:

display:inline; //Keine Zeilenumbrüche erzwingen zoom:1; // Wird zum Auslösen von hasLayout verwendet. Affen, die an einem detaillierten Verständnis interessiert sind, können es selbst lernen

Der zweite ist die Auswirkung auf das übergeordnete Element

Zu Inline-Block gibt es nichts zu sagen. Das Einzige, was zu beachten ist, ist, dass jedes Element mit Inline-Block direkt Lücken hat, die im übergeordneten Element platziert werden können

ist wie folgt:

font-size
: 0; um es zu beseitigen, aber jeder kennt die Konsequenzen, aber ich denke das immer noch ist die einfachste und gewalttätigste Methode. Bitte suchen Sie nach

Elemente mit diesem Attributsatz lösen sich vom Textfluss Dasselbe wie

position

:absolute ist dasselbe, aber es wird nicht dasselbe für Elemente mit diesem Attributsatz sein. Das Problem besteht also darin, dass das übergeordnete Element die Länge und Breite nicht mit der Größe des untergeordneten Elements ändert Element, aber wenn das übergeordnete Element auf Inline-Block eingestellt ist, ändern sich Länge und Breite mit den untergeordneten Elementen (vorausgesetzt, der Browser ist mit Inline-Block kompatibel. Wenn er kompatibel ist, verwende ich Inline-Block direkt ~ ). Legen Sie daher das Inline-Block-Attribut nicht für das übergeordnete Element fest. Manchmal müssen Sie

das Floating

. nach dem letzten Floating-Element vor dem Ende löschen des übergeordneten Elements.

klar

: beides (das Prinzip besteht wahrscheinlich darin, ein Element mit Textfluss zu verwenden). Positionieren Sie die Größe des übergeordneten Elements, sodass sich die Höhe des übergeordneten Elements mit dem schwebenden Element ändert

Schließlich gibt es noch einige andere kleine Unterschiede

Grundlinie: float und inline-block Die Grundlinie von

float ist, dass das schwebende Element nahe am liegt oben.

Die Basislinie von inline-block ist die Standardbasislinie, daher ist sie flexibler und kann mit

vertikal-align

verwendet werden. Endlich ... Persönlich , Ich bevorzuge die Verwendung von Inline-Blocks, die durch Floats ersetzt werden können. Dies ist die einzige Möglichkeit, ein Element zu umgeben

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Float und Inline-Block. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!