Beherrschen Sie die CSS-Eigenschaft „display:flow-root“-Deklaration in einem Artikel

von zhangxinxu von https://www.zhangxinxu.com/wordpress/?p=9404

Dieser Artikel darf gerne geteilt und zusammengefasst werden. Es ist nicht erforderlich, den vollständigen Text erneut abzudrucken. Bitte respektieren Sie das Urheberrecht. Der Kreis ist so klein. Wenn Sie ihn dringend benötigen, können Sie uns für eine Genehmigung kontaktieren.

1. Safari-Browser unterstützt

Als display:flow-root zum ersten Mal veröffentlicht wurde, habe ich mir seine Kompatibilität angesehen und mich gefragt, wann es in einer Produktionsumgebung verwendet werden könnte. Heute bin ich wieder darauf gestoßen und habe seine Kompatibilität überprüft. Mann, es ist wirklich gut. Der Safari-Browser unterstützt es seit Version 13, es wird also bald weit verbreitet sein.

2. Wofür wird display:flow-root verwendet?

Elemente, egal ob Inline oder ursprünglich Blockebene, werden zu Blockebenenelementen, nachdem display:flow-root angewendet wurde. Gleichzeitig erstellt dieses Element einen neuen Formatierungskontext auf Blockebene, der in der Branche allgemein als BFC bezeichnet wird.

In Bezug auf BFC können Sie auf meinen vorherigen klassischen Artikel verweisen: „Tiefgehendes Verständnis der Flüssigkeitseigenschaften von CSS und des mehrspaltigen adaptiven Layouts unter BFC-Eigenschaften“.

BFC kann nicht nur für das Layout verwendet werden, sondern auch Floats löschen und Randzusammenführungen entfernen. Daher hat display:flow-root auch einen ähnlichen Effekt. Verglichen mit Formatkontexten auf Blockebene, die durch Funktionen wie float, position oder overflow, inline-block generiert werden, bringt display:flow-root keine zusätzlichen Nebeneffekte für die Elemente mit sich. Beispielsweise kann overflow:hidden zwar die Interferenzen von Floats entfernen, kann aber verhindern, dass untergeordnete Elemente außerhalb des Containers positioniert werden.

Bei der Verwendung von display:flow-root gibt es derartige Bedenken nicht.

Im folgenden Beispiel hat der Container beispielsweise einen Umriss und die untergeordneten Elemente sind schwebend:

<p><img src="mm.jpg"></p>
P {
    Umriss: durchgehendes Dunkelhimmelblau;    
}
img {
    schweben: links;
}

Die resultierenden Konturen werden wie unten gezeigt zusammengeführt:

Ab diesem Zeitpunkt besteht das durch Floating verursachte Problem des Höhenabfalls von Elementen nicht mehr, solange display:flow-root für das <p> -Element festgelegt ist:

P {
    Anzeige: Flow-Root;
}

Der Effekt ist im folgenden Screenshot dargestellt:

In ähnlicher Weise kann das Phänomen der Zusammenführung von Randeigenschaften durch die Verwendung von display:flow-root verhindert werden.

Der HTML-Code lautet wie folgt:

<div Klasse="Box">
    <p>Rand: 2em;</p>
</div>
<div Klasse="Box Flow-Root">
    <p>Rand: 2em;</p>
</div>

Das CSS lautet wie folgt:

.Kasten {
    Hintergrundfarbe: #f0f3f9;    
}
.box p {
    Umriss: durchgehendes tiefes Himmelblau;
    Rand: 2em;
}
.flow-root {
    Anzeige: Flow-Root;
}

Dies führt dazu, dass der Rand des oberen Containerelements durchdrungen wird, während die Randdurchdringung des unteren Containerelements verhindert wird, da display:flow-root gesetzt ist. Dadurch erscheint der Platz, den das <p> -Element im Inneren einnimmt, größer, wie in der folgenden Abbildung dargestellt:

Für beide der oben genannten Beispiele gibt es Demos zum Anschauen. Sie können hier klicken, um die Demo von display:flowt-root anzuzeigen:

display:flow-root kann auch in Verbindung mit dem Float-Attribut verwendet werden, um einen zweispaltigen adaptiven Layouteffekt zu erzielen.

Zum Beispiel:

<div Klasse="Box Flow-Root">
    <img src="mm.jpg">
    <p class="flow-root">Pinduoduo stieg um 7 %, sein Marktwert überstieg 70 Milliarden US-Dollar und übertraf damit JD.com. Mit seinem Privatvermögen ist Huang Zheng zugleich der drittreichste Mensch auf dem chinesischen Festland.
</div>

.box img {
    schweben: links;
    Rand rechts: 20px;
}
.box p {
    Hintergrundfarbe: #f0f3f9;
    Polsterung: 10px;
}
.flow-root {
    Anzeige: Flow-Root;
}

Der Echtzeiteffekt ist wie folgt:

Pinduoduo stieg um 7 % und sein Marktwert überstieg 70 Milliarden US-Dollar und übertraf damit JD.com. Aufgrund seines Privatvermögens ist Huang Zheng der drittreichste Mensch auf dem chinesischen Festland.

3. Fazit

Fassen Sie die wichtigsten Punkte dieses Artikels zusammen

display:flow-root kann Elemente blockförmig machen und den Formatierungskontext BFC einbinden, der zum Löschen von Floats, Entfernen margin und Erreichen eines zweispaltigen adaptiven Layouts verwendet werden kann.

display:flow-roo kann in einigen Projekten verwendet werden.

Anzeige: Durchfluss

display Anzeigeeigenschaft unterstützt auch einen derzeit experimentellen Wert namens flow , der angibt, dass das Element entweder eine Inline-Box oder eine Blockbox sein kann.

Welche Box gerendert wird, hängt von der Anzeigeart des äußeren Elements ab.

Generiert entweder einen Inline-Formatierungskontext oder einen Blockformatierungskontext. Wenn der externe Anzeigetyp des Elements „Inline“ oder „Run-In“ ist und das Element an einem Block- oder Inline-Formatierungskontext teilnimmt, verhält sich das Element wie eine Inline-Box, andernfalls verhält es sich wie eine Blockcontainer-Box.

Je nachdem, ob Formatierungskontexteigenschaften eingeschlossen sind (wie etwa position , float oder overflow ) und ob das Element selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, richtet display:flow Element entweder einen neuen Blockformatierungskontext (BFC) für seinen Inhalt ein oder integriert seinen Inhalt in seinen übergeordneten Formatierungskontext.

Die Kompatibilität von display:flow ist derzeit unbekannt und es wird geschätzt, dass nur wenige Browser es unterstützen.

Ich werde es ausführlich vorstellen, wenn es ausgereift ist.

Dies ist das Ende dieses Artikels über die Beherrschung der CSS-Deklaration display:flow-root in einem Artikel. Weitere relevante CSS-Inhalte zu display:flow-root finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!