Hier ist mein Code. Ich wundere mich, warum meine Hintergrundfarbe nicht zeigt. Wenn ich CSS-Anzeige von Inline zu Block ändern, dann wird es angezeigt. Warum wird es nicht angezeigt, wenn die Anzeige inline ist? Ich versuche den Grund des Problems zu verstehen, außer nach einer Lösung zu suchen.
Das div nimmt keinen Platz in Anspruch, wenn es inline ist. Wenn Sie ein Inline-Element haben möchten, das als Kinderhöhe angezeigt wird, verwenden Sie display: inline-block; .
Was eine gute Diskussion angeht, würde ich QuirksMode besser annehmen als meine eigenen. Das Wesentliche ist, dass ein inline -Element andere Elemente nicht aus dem Weg räumt.
div ist standardmäßig ein Blockelement. Das Ändern des Anzeigemodells eines Blockelements in Inline ist keine gute Vorgehensweise. Überschriften sind auch Blockelemente. Das Verschachteln eines Blockelements in ein Inline-Element ist kein gültiger HTML-Code. Wenn Sie einen markierungsähnlichen Effekt wünschen (Hintergrundfarbe nur für Text, nicht für ganzes Element), müssen Sie ein Inline-Element wie span verwenden.
Die neueste Überarbeitung von CSS2.1 sagt dazu Folgendes Wichtig:
Wenn eine Inline-Box eine In-Flow-Box auf Blockebene enthält, wird die Inline-Box angezeigt (und seine Inline-Vorfahren in der gleichen Zeile Box) sind herumgebrochen die Box auf Blockebene (und alle Geschwister auf Blockebene, die fortlaufend sind oder nur durch kollabierbare Leerräume und / oder außerhalb des Flusses getrennt Elemente), wobei die Inline - Box in zwei Boxen aufgeteilt wird (auch wenn Seite ist leer), eine auf jeder Seite der Block-Level-Box (en). Die Linie Boxen vor der Pause und nach der Pause sind in anonymer Form eingeschlossen Block-Boxen, und die Block-Level-Box wird ein Geschwister von denen anonyme Boxen. Wenn eine solche Inline-Box von relativ betroffen ist Positionierung wirkt sich jede resultierende Übersetzung auch auf die Blockebene aus Box in der Inline-Box enthalten.
Mit anderen Worten, aus der Sicht des Layouts bildet die Inline-Kombination div und h3 eine Inline-Box, eine Blockbox und eine weitere Inline-Box. Nur die zwei Inline-Boxen nehmen die Formatierung (dh die Hintergrundfarbe) und die Blockbox bildet keinen Teil der vom div definierten Inline-Box und nimmt daher ihre Standard-Hintergrundfarbe (die transparent ist und durch den Hintergrund zeigt) Farbe der enthaltenen Block-Box).