Mobile versionIch habe versucht zu verstehen, wie display: inline und display: inline-block funktionieren, und habe nur mit zufälligen Layouts herumgespielt, um zu sehen, wie sich die Dinge geändert haben/was davon beeinflusst wurde, wobei nur ein Elternteil/Container mit nur drei Kindern auf die folgende Weise gefüllt wurde, wie unten in a eingefügt wird Snippet.
Das beobachtete Verhalten ist das eines Leerraums zwischen zwei Inline-Block-Elementen, wie es aufgrund von Zeilenumbrüchen in HTML selbst beabsichtigt ist, und wie ich bemerkt habe, scheint der Abstand zwischen den Elementen nicht zu wachsen, egal wie diese Zeilenumbrüche vorhanden sind, was vielleicht als „Zusammenklappen“ bezeichnet wird, aber ich bin mir nicht ganz sicher.
Auch wenn wir mit der Maus über die Mitte fahren html-Element (bei Verwendung von Devtools) können wir das Element irgendwo nahe am unteren Rand der umgebenden Elemente sehen, da das mittlere Element am unteren Rand dieser beiden Elemente ausgerichtet sein muss und die Abmessungen des mittleren Elements 0x17px betragen, was bedeutet, dass das Element keine Höhe hat und daher keine Hintergrundfarbe haben kann.
Hier (im Beispiel unten) funktioniert es auf eine Weise, die für mich klar und verständlich ist, da das Element keinen Inhalt enthält es und hat daher keine Höhe und daher keine Hintergrundfarbe. Eigenschaften, die ich in Devtools beobachtet habe, um herauszufinden, woher die Dinge kamen, waren innerHTML, innerText, outerText und textContent, obwohl ich glaube, dass ich einige andere wichtige Eigenschaften übersehen habe. Im folgenden Beispiel sind die aufgeführten jedoch alle „“.
Code: Select all
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Code: Select all
Im nächsten Beispiel, in dem ich nur eine geringfügige Änderung hinzufüge, einen Zeilenumbruch innerhalb des mittleren Elements, beginnen sich die Eigenschaften zu ändern (ganz zu erwarten).
Die Requisite innerHTML zeigt jetzt die neue Zeile darin an, innerText bleibt leer. outerText bleibt ebenfalls leer und textContent enthält jetzt den neu eingefügten Zeilenumbruch.
Wenn man jedoch mit der Maus darüber fährt, beträgt die Größe immer noch 0x17 und es wird kein Hintergrund angezeigt, was meiner Meinung nach zu erwarten ist. Im DOM-Tokenizer-Tool ist das mittlere Div auf beiden Seiten von einem Textknoten umgeben, was durch die Zeilenumbrüche nach dem ersten Div-Tag und nach dem mittleren Div selbst erklärt wird.
Das folgende Snippet zeigt keine visuelle Änderung zum vorherigen, aber ich denke, es ist wichtig zu verfolgen, wie sich die Dinge entwickelt haben, die sich später genau auf das beziehen, was die ursprüngliche Frage verursacht hat.
Code: Select all
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Code: Select all
Das nächste Beispiel, bei dem nur eine kleine Änderung an HTML vorgenommen wurde, wird jedoch etwas zeigen, das ich nicht erklären kann und das mir entgeht, für Sie aber vielleicht etwas sehr Offensichtliches ist. Das schließende Tag des ersten Divs wird jetzt zusammen mit dem öffnenden Tag des zweiten Divs platziert, anstatt in seiner Anfangszeile neben seinem eigenen öffnenden Tag zu bleiben.
Das von mir erwähnte DOM-Tokenizer-Tool zeigt jetzt an, dass diese beiden Divs (das erste und das zweite) keinen Textknoten zwischen sich haben, was zu erwarten war, und das mittlere Div zeigt jetzt Hintergrundfarbe und hat an Größe zugenommen – es ist jetzt 4 x 17 Pixel groß, hat an Höhe gewonnen … aber von wo aus und warum – ich weiß es nicht.
Bei weiterer Betrachtung in den Devtools finden wir die zuvor besprochenen Eigenschaften in folgendem Zustand: innerHTML hat einen Zeilenumbruch als Wert, innerText hat sich jetzt in ein „ “ von „ verwandelt, äußerer Text hat sich jetzt ebenfalls in „ „ von „“ verwandelt, wobei textContent genau wie zuvor einem Zeilenumbruch entspricht. Es gibt also Änderungen nach dem verschobenen schließenden Tag, die dafür sorgen, dass das mittlere Element Höhe und Hintergrundfarbe hat.
Ich habe also drei Bedingungen gefunden, unter denen die Hintergrundfarbe für das mittlere Element ausgelöst wird, und zwar:
- das schließende Tag des ersten Elements sollte in derselben Zeile stehen wie das öffnende Tag des mittleren Elements (das hört sich sehr seltsam an und ich denke, es muss einen anderen Grund dafür geben). dass)
- das mittlere Element sollte diesen Zeilenumbruch in sich haben
- das dritte Element muss existieren
Wie bereits erwähnt, demonstriert das folgende Beispiel das oben beschriebene Verhalten, wenn alle Bedingungen erfüllt sind.
Code: Select all
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Code: Select all
Ich war also nicht in der Lage, diese Dinge zu einem verständlichen Bild zusammenzufügen. Wenn das dritte Element entfernt wird, hat das mittlere Element irgendwie keine Höhe mehr und die Requisiten, die früher " " waren, werden zu ". Haben Sie eine Idee, wo Sie suchen müssen oder welches Gesetz/welche Regel hier im Spiel ist?
