Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Nichtorthogonale Ränder

Wenn ein Rand verwendet wird, führt dies zum Zusammenführen

Die folgenden Eigenschaften verhindern das Zusammenführen von Rändern:

Grenze

Anzeige: Tabelle

Anzeige: Flex

Der obige Inhalt ist das Ergebnis der detaillierten Erklärung unten

Blockierung der Fusion [Detaillierte Erklärung]

/* CSS */

    .Kasten{
        Rand: 1px durchgehend rot;
        Höhe: 100px;
        Rand: 10px; /* Hinweis: Das sind 10 Pixel! */
    }

<!-- HTML -->

<div Klasse="Box"></div>
<div Klasse="Box"></div>
<div Klasse="Box"></div>

So sieht es im Browser aus:

Gemäß dem rationalen Zahlenrand sollte der Abstand zwischen der Ober- und Unterseite des Divs 20 Pixel betragen.

Lösung 1:

<!-- HTML -->
<!-- CSS unverändert -->

<div Klasse="Box"></div>
<div style="border: 1px solid blue"></div> <!-- Neu hinzugefügt -->
<div Klasse="Box"></div>
<div style="border: 0.1px solid blue"></div> <!-- Neu hinzugefügt -->
<div Klasse="Box"></div>
<div Klasse="Box"></div>

So sieht es im Browser aus:

<!-- HTML -->
<!-- CSS unverändert -->

<!-- HTML -->
<div Klasse="Box"></div>
<div style="Anzeige: Tabelle"></div>
<div Klasse="Box"></div>
<div Stil="Anzeige: flex"></div>
<div Klasse="Box"></div>
<div Klasse="Box"></div>
<!-- display:block / inline blockiert das Zusammenführen nicht, nur Tabellenflex kann das -->

So sieht es im Browser aus:

Andere Auswirkungen

Anzeige wird die kleinen Punkte von ul li beeinflussen

Position: absolut beeinflusst Anzeige: Inline

Position: Fest beeinflusst die Transformation

Float wirkt sich auf Inline aus

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.