Hintergrundeinführung
Jedes HTML-Tag-Element verfügt über einen Standardelementtyp, der hauptsächlich zwei Kategorien umfasst: Inline-Elemente und Blockelemente. Andere werden als variable Elemente bezeichnet und das Element wird je nach Kontext als Inline-Element oder Blockelement bestimmt.
In CSS gibt es ein Anzeigeattribut, das die Art der Box angibt, die ein Element haben soll. Es gibt viele mögliche Werte. Neben Inline und Block werden häufig auch Table-Cell, Inline-Block usw. verwendet. Darunter ist der Inline-Block css2.1 Der Wert, der hinzugefügt wird.
Linie und Block ähneln den Grundkonzepten von 1+1=2. In der Zeit vor dem Internet gab es den sogenannten Zeitungsausschnitt, bei dem aus Zeitungen, Zeitschriften usw. ausgeschnittene Text- und Bildmaterialien in Bänden organisiert und klassifiziert wurden. Wir können uns die ausgeschnittenen Papierstücke als Blockelemente vorstellen und die mit dem Stift aufgezeichneten Texte und Bilder als Linienelemente. Diese beiden Elemente wurden bei der ersten Entwicklung des Browsers hinzugefügt, wahrscheinlich nach dem gleichen Muster.
Den Daten zufolge wurde der Inline-Block-Wert im Dezember 1999 in IE5.5 unterstützt (die endgültige Version war Juli 2007). Das CSS2-Update wurde im Mai 1998 veröffentlicht, und der erste Update-Entwurf von 2.1 wurde am 2. August 2002 veröffentlicht (CSS2.1-Version fügte den Inline-Block-Wert der Anzeige hinzu). Zu diesem Zeitpunkt habe ich möglicherweise zur besseren Gestaltung von Elementen den Inline-Block-Wert zur Anzeige im Standard hinzugefügt.
Wissensanalyse
- gemeinsame Elemente
inline元素：a,span,br,i,em,strong,label,q,var,cite,code
inline-block元素：img,input
block元素：p,div,h1...h6,ol,dl,table,address,blockquote,form
- Was sind die Merkmale von jedem?
Inlin-Funktionen:
（1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素内容而变化
（2）元素的高度、宽度及顶部和底部边距不可设置
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变
Blockfunktionen:
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及和底边距都可设置
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
Inline-Block-Funktionen:
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。和其他元素都在一行上；元素的高度、宽度、行高以及底边距都可设置。
Häufig gestellte Fragen und Lösungen
- Abstandsproblem zwischen Inline- und Inline-Block-Elementen
设置父容器的font-size为0，子容器重新设置font-size。
- So zentrieren Sie Inline-Block-Elemente vertikal
设置上下padding值相等；
设置vertical-align:middle;
设置line-height大于font-size；