Was bedeutet Inline-Block in CSS?

In CSS bezieht sich Inline-Block auf „Inline-Block-Element“, das die Eigenschaften von Inline-Elementen und Block-Elementen aufweist und sich in derselben Zeile wie andere Elemente befinden kann, sowie die Höhe, Breite und Zeilenhöhe sowie der obere und untere Rand können festgelegt werden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Block

Merkmale von Elementen auf Blockebene:

1 Jedes Element auf Blockebene beginnt in einer neuen Zeile, und nachfolgende Elemente beginnen ebenfalls in einer neuen Zeile. (Es ist wirklich dominant, ein Element auf Blockebene belegt eine Zeile)

2 Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können eingestellt werden.

3. Wenn nicht festgelegt, beträgt die Breite eines Elements 100 % seines übergeordneten Containers (identisch mit der Breite des übergeordneten Elements), sofern keine Breite festgelegt ist.

,

,

,

,

sind Beispiele für Blockelemente.

inline

Eigenschaften von Inline-Elementen:

1 Sie liegen auf derselben Linie wie andere Elemente;

2. Die Höhe, Breite und der obere und untere Rand des Elements können nicht festgelegt werden. Die Breite des Elements beträgt Die Breite des darin enthaltenen Textes oder Bildes kann nicht geändert werden.

, , , , und

Inline-Block

Inline-Blockelemente (Inline-Block) haben die Eigenschaften sowohl von Inline-Elementen als auch von Blockelementen.

Inline-Block-Elementfunktionen:

1. Es befindet sich in derselben Zeile wie andere Elemente.

2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden.

Hinweis:

Nicht alle Browser unterstützen derzeit: Opera und Safari. Verwenden Sie display:inline-block für Inline-Elemente im IE, verwenden Sie jedoch display:inline-block Trigger-Layout unter IE, sodass Inline-Elemente das Attribut display:inline-block haben. Aus der obigen Analyse ist nicht schwer zu verstehen, warum das Festlegen des display:inline-block-Attributs für ein Blockelement nicht den Effekt von inline-block unter IE erzielen kann. Zu diesem Zeitpunkt wird das Layout des Blockelements nur durch display:inline-block ausgelöst und ist ursprünglich ein Zeilenlayout. Daher befindet sich das Blockelement nach dem Auslösen immer noch in einem Zeilenlayout und wird nicht als gerendert Inline-Objekt wie das Blockelement in Opera.

IE

Wie erzielt man den Effekt von display:inline-block auf das nächste Blockelement? Es gibt zwei Methoden:

1. Verwenden Sie zuerst das Attribut display:inline-block, um das Blockelement auszulösen, und definieren Sie dann display:inline, um das Blockelement als Inline-Objekt darzustellen (die beiden Anzeigen müssen in zwei Teile platziert werden). css-Anweisungen nacheinander) Dies ist ein klassischer Fehler des IE. Wenn Sie zuerst display:inline-block definieren und dann die Anzeige wieder auf inline oder block setzen, verschwindet das Layout nicht. Der Code lautet wie folgt (...andere Attributinhalte werden weggelassen):

div {display:inline-block;...} 
div {display:inline;}

2. Legen Sie das Blockelement direkt so fest, dass es als Inline-Objekt dargestellt wird (legen Sie das Attribut display:inline fest) und lösen Sie dann das Layout des Blocks aus Element (z. B. zoom:1 usw.). Der Code lautet wie folgt:

div {display:inline; zoom:1;}

Gesamtkonzept

Die beiden Konzepte Block und Inline sind Abkürzungen, und die vollständigen und genauen sollten Elemente auf Blockebene (Elemente auf Blockebene) und Inline-Elemente (Inline-Elemente) sein. . Das Blockelement wird normalerweise als unabhängiger Block realisiert und in eine separate Zeile umgewandelt. Das Inline-Element führt vorher und nachher nicht zu Zeilenumbrüchen, und eine Reihe von Inline-Elementen wird in einer Zeile angezeigt, bis die Zeile voll ist.

Im Allgemeinen haben HTML-Elemente jeweils ihre eigene Layoutebene (Blockelement oder Inline-Element):

Zu den üblichen Elementen auf Blockebene gehören p, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL usw . .

Zu den gängigen Inline-Elementen gehören SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR usw.

Blockelemente können Blockelemente und Inline-Elemente enthalten. Inline-Elemente können jedoch nur Inline-Elemente enthalten. Es ist zu beachten, dass dies eine allgemeine Aussage ist und die Elemente, die jedes spezifische Element enthalten kann, ebenfalls spezifisch sind, sodass diese Regel nicht für einzelne Elemente gilt. Beispielsweise kann das P-Element nur Inline-Elemente enthalten, nicht jedoch Blockelemente.

Im Allgemeinen verwenden wir display:block, display:inline oder display:inline-block, um die Layoutebene von Elementen anzupassen. Tatsächlich gibt es weitaus mehr Anzeigeparameter als diese drei, sie werden nur häufiger verwendet.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWas bedeutet Inline-Block in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!