Detaillierte Erläuterung der Inline-Blocklayout-Implementierung des CSS-Anzeigeattributs

CSS-Anzeigeeigenschaft

Hinweis: Wenn !DOCTYPE angegeben ist, unterstützt Internet Explorer 8 (und höher) die Eigenschaftswerte „inline-table“, „run-in“, „table“, „table-caption“, „table-cell“, „table-column“, „table-column-group“, „table-row“, „table-row-group“ und „inherit“. Alle gängigen Browser unterstützen die Anzeigeeigenschaft.

Definition und Verwendung

Die Anzeigeeigenschaft gibt den Boxtyp an, den ein Element generieren soll.

veranschaulichen

Mit diesem Attribut wird die Art des Anzeigerahmens definiert, den das Element beim Erstellen eines Layouts generiert. Bei Dokumenttypen wie HTML kann die Verwendung der Anzeigefunktion gefährlich sein, wenn man nicht vorsichtig ist, da dadurch die in HTML definierte Anzeigehierarchie verletzt werden kann. Da bei XML keine solche Hierarchie eingebaut ist, ist die gesamte Anzeige absolut notwendig.

Hinweis: Die Werte compact und marker existierten in CSS2, wurden jedoch aufgrund mangelnder breiter Unterstützung aus CSS2.1 entfernt.

1. Erläutern Sie einige allgemeine Attributwerte von Anzeige, Inline, Block und Inline-Block

inline (Inline-Element): Wandelt das Element in ein Inline-Element um, das die Eigenschaften eines Inline-Elements hat, d. h. es kann eine Zeile mit anderen Inline-Elementen teilen und nimmt keine Zeile allein ein. Die Höhen- und Breitenwerte des Elements können nicht geändert werden und die Größe wird durch den Inhalt erweitert. Die Polsterung kann oben, unten, links und rechts wirksam sein, und nur die linken und rechten Ränder können Randeffekte erzeugen, die oberen und unteren jedoch nicht.block (Blockebenenelement): Wandelt das Element in ein Blockebenenelement um, das eine Zeile allein einnimmt. Wenn seine eigene Breite nicht festgelegt ist, füllt das Blockebenenelement standardmäßig die Breite des übergeordneten Elements aus. Die Höhen- und Breitenwerte des Elements können geändert werden. Die verschiedenen Attributwerte von Polsterung und Rand können festgelegt werden, und oben, links, unten und rechts können alle Randeffekte erzeugen. inline-block (Inline-Block-Integration): kombiniert einige Eigenschaften von Inline und Block, wobei die erste Eigenschaft von Inline und die zweite und dritte Eigenschaft von Block, die oben erwähnt wurden, kombiniert werden. Einfach ausgedrückt ist es ein Blockebenenelement, das keine Zeile allein einnimmt. Wie gezeigt:

Abbildung 1:

Abbildung 2:

Aus den beiden Abbildungen können wir erkennen, dass nach der Anzeige: Inline-Block Elemente auf Blockebene in derselben Zeile angezeigt werden können. Manche Leute sagen, dass dies genau wie Floating ist. Ja, der Effekt von display: inline-block ist fast der gleiche wie float, aber es gibt auch Unterschiede. Als nächstes sprechen wir über den Vergleich zwischen inline-block und float.

2. Inline-Block-Layout vs. schwebendes Layout

a. Unterschied: Wenn display: inline-block für ein Element festgelegt ist, wird das Element nicht vom Textfluss getrennt, während float das Element vom Textfluss trennt und außerdem die Höhe des übergeordneten Elements reduziert.

b. Ähnlichkeiten: können bis zu einem gewissen Grad den gleichen Effekt erzielen

Schauen wir uns diese beiden Layouts an:

Abbildung 1: Anzeige: Inline-Block

Abbildung 2: Verwenden Sie float:left für die beiden untergeordneten Elemente. Ich habe im vorherigen Artikel über schwebende Layouts erwähnt, dass dies daran liegt, dass das übergeordnete Element in der Höhe zusammenfällt. Daher müssen wir das Float schließen und overflow:hidden für die Box verwenden. Der Effekt ist wie folgt:

>>Auf den ersten Blick können beide fast den gleichen Effekt erzielen. (Achten Sie genau auf das Lückenproblem in der Anzeige: Inline-Block, das weiter unten erläutert wird.)

c. Die Nachteile des schwebenden Layouts: Ungleichmäßigkeit. Schauen wir uns einen Effekt an:

Abbildung 3:

Abbildung 4:

>>Aus den Abbildungen 3 und 4 können wir erkennen, dass die Beschränkung des Floatings darin besteht, dass die Höhen der untergeordneten Elemente konsistent sein müssen, wenn die Elemente eine Zeile füllen und nach dem Zeilenumbruch sauber angeordnet werden sollen. Andernfalls tritt der in Abbildung 3 gezeigte Effekt auf, bei Inline-Block jedoch nicht.

3. Kleinere Probleme mit Inline-Block:

a. Wie Sie oben sehen können, gibt es nach der Verwendung von display:inline-block ein Lückenproblem mit einer Lücke von 4 Pixeln. Dieses Problem wird durch Zeilenumbrüche verursacht. Wenn wir ein Tag schreiben, drücken wir normalerweise nach dem Tag-Endzeichen einen Wagenrücklauf, und ein Wagenrücklauf erzeugt ein Wagenrücklaufzeichen, das einem Leerzeichen entspricht. Normalerweise werden mehrere aufeinanderfolgende Leerzeichen zu einem Leerzeichen zusammengeführt, und der wahre Grund für die „Leerlücke“ ist dieses Leerzeichen, dem wir nicht viel Aufmerksamkeit schenken.

b. Methoden zum Entfernen von Lücken:
1. Füge dem übergeordneten Element {font-size:0} hinzu, wodurch die Schriftgröße auf 0 gesetzt wird. Dann wird auch das Leerzeichen zu 0px, wodurch die Lücke geschlossen wird.

Mittlerweile ist diese Methode mit verschiedenen Browsern kompatibel, Chrome war dies vorher jedoch nicht.

Abbildung 1:

c. Browserkompatibilität: IE6/7 ist nicht mit display: inline-block kompatibel, daher ist eine zusätzliche Verarbeitung erforderlich:
Im IE6/7:
Verwenden Sie für Inline-Elemente direkt {dislplay:inline-block;}
Für Elemente auf Blockebene: fügen Sie {display:inline;zoom:1;} hinzu

4. Zusammenfassung:

Anzeige: Inline-Block-Layout und schwebendes Layout. Welches verwendet werden soll, sollte meiner Meinung nach je nach tatsächlicher Situation entschieden werden:
a. Für die horizontale Anordnung von Dingen bevorzuge ich die Verwendung von Inline-Blöcken für das Layout, da dies klarer ist und Floats nicht wie Floating gelöscht werden müssen und man sich keine Sorgen über Layoutverwirrungen usw. machen muss.
b. Für schwebende Layouts wird es verwendet, wenn Textumbruch erforderlich ist. Schließlich ist das Schweben hier wirklich nützlich. Die horizontale Anordnung wird dem Inline-Block überlassen.