CSS-Randüberlappungen und wie man sie verhindert

Die vertikal benachbarten Kanten zweier oder mehrerer Boxen auf Blockebene überlappen sich. Die resultierende Rahmenbreite ist die größte der angrenzenden Rahmenbreiten. Wenn negative Grenzen auftreten, wird die negative Grenze mit dem größten Absolutwert von der größten positiven Grenze abgezogen. Wenn keine positiven Grenzen vorhanden sind, wird die negative Grenze mit dem größten Absolutwert von Null abgezogen. Hinweis: Aneinandergrenzende Boxen dürfen nicht durch Elemente in einer Eltern-Kind- oder Geschwisterbeziehung erzeugt werden.

Es gibt jedoch Ausnahmen von den überlappenden Grenzen:

1. Horizontale Ränder überlappen sich nie.

2. Im Spezifikationsdokument überlappen sich die benachbarten vertikalen Ränder von zwei oder mehr Boxmodellen auf Blockebene. Der endgültige Margenwert wird wie folgt berechnet:

a. Alle Werte sind positiv, nehmen Sie den größten;

b. Wenn es sich nicht um alle positiven Werte handelt, nehmen Sie ihre absoluten Werte und subtrahieren Sie dann den Maximalwert vom positiven Wert.

c. Wenn kein positiver Wert vorhanden ist, nehmen Sie den Absolutwert und subtrahieren Sie dann den Maximalwert von 0.

Hinweis: Benachbarte Boxen können dynamisch durch DOM-Elemente generiert werden und weisen keine benachbarte oder vererbte Beziehung auf.

3. Wenn zwischen benachbarten Boxmodellen eines schwebt (float), überlappen sich die vertikalen Ränder nicht. Dasselbe gilt zwischen dem schwebenden Boxmodell und seinen untergeordneten Elementen.

4. Die Ränder zwischen einem Element mit gesetztem Überlaufattribut und seinen untergeordneten Elementen überlappen sich nicht (außer wenn der Überlaufwert sichtbar ist).

5. Bei einem Boxmodell mit absoluter Positionierung (position:absolute) überlappen sich die vertikalen Ränder nicht und das Gleiche gilt zwischen ihnen und ihren untergeordneten Elementen.

6. Bei Elementen mit dem festgelegten display:inline-block kommt es nicht zu einer Überlappung der vertikalen Ränder, auch nicht bei ihren untergeordneten Elementen.

7. Wenn die oberen und unteren Ränder eines Boxmodells aneinander grenzen, kann es sein, dass seine Ränder sich überlappen und es bedecken (durchfallen). In diesem Fall hängt die Position eines Elements davon ab, ob sich die Ränder seiner Nachbarelemente überlappen.

a. Wenn der Rand eines Elements mit dem oberen Rand des übergeordneten Elements überlappt, ist die obere Rahmenbegrenzungsdefinition des Boxmodells dieselbe wie die des übergeordneten Elements.

b. Darüber hinaus nimmt das übergeordnete Element eines beliebigen Elements nicht an der Randüberlappung teil, oder anders ausgedrückt: An der Berechnung ist nur der untere Rand des übergeordneten Elements beteiligt. Wenn die obere Rahmenkante des Elements ungleich Null ist, wird die obere Rahmenkante des Elements an derselben Stelle positioniert wie zuvor.

Der obere Rand eines Elements, auf das eine Löschung angewendet wurde, überlappt niemals den unteren Rand des übergeordneten Elements auf Blockebene.

Beachten Sie, dass die Positionierung von Elementen, die bereits durch Überlappung abgedeckt sind, keine Auswirkungen auf die Positionierung anderer, bereits überlappender Elemente hat. Die obere Rahmenposition ist nur bei der Positionierung der untergeordneten Elemente dieser Elemente erforderlich.

8. Der vertikale Rand des Stammelements wird nicht überlappt.

Beispiel für Randüberlappung

Randüberlappung bezieht sich auf das Phänomen, dass sich die Ränder überlappen, wenn die oberen und unteren Ränder zweier vertikal benachbarter Elemente auf Blockebene aufeinandertreffen, und die Ränder nach der Überlappung gleich dem größeren Rand sind.

Um das Lernen für alle einfach und effizient zu gestalten, stellen wir Ihnen kostenlos zahlreiche Informationen zur Verfügung, die Ihnen dabei helfen sollen, die Schwierigkeiten auf dem Weg zum Front-End-Ingenieur oder sogar zum Full-Stack-Ingenieur zu überwinden. Hier empfehle ich einen Front-End-Full-Stack-Lernaustauschkreis: 784783012. Alle sind herzlich eingeladen, der Gruppe beizutreten, um gemeinsam zu diskutieren, zu lernen und Fortschritte zu machen.

Wenn Sie wirklich mit dem Lernen beginnen, ist es unvermeidlich, dass Sie nicht wissen, wo Sie anfangen sollen. Dies führt zu geringer Effizienz und beeinträchtigt Ihr Selbstvertrauen beim Weiterlernen.

Das Wichtigste ist jedoch, dass Sie nicht wissen, auf welche Technologien Sie sich konzentrieren müssen, und Sie tappen beim Lernen häufig in Fallen, was letztendlich viel Zeit verschwendet. Daher sind wirksame Ressourcen weiterhin erforderlich.

Symbol:

Ein weiteres Überlappungsphänomen besteht darin, dass, wenn ein Element in einem anderen Element enthalten ist, das untergeordnete Element ebenfalls mit dem übergeordneten Element überlappt. Der äußere Rand nach der Überlappung entspricht dem größeren der beiden:

Wenn ein leeres Element keinen Inhalt hat, überlappen sich auch seine oberen und unteren Ränder.

Die Bedeutung überlappender Ränder

Randüberlappungen treten nur zwischen den oberen und unteren Rändern eines normalen Dokumentflusses auf. Diese scheinbar seltsame Regel hat tatsächlich praktische Bedeutung. Stellen Sie sich vor, dass beim Anordnen einer Reihe regulärer Elemente auf Blockebene (z. B. Absatz P) auf und ab aufgrund der überlappenden Ränder zwischen den Blockelementen kein doppelter Abstand zwischen den Absätzen entsteht.

Lösung zur Vermeidung von Randüberlappungen:

Obwohl überlappende Ränder ihre eigene Bedeutung haben, möchten wir manchmal nicht, dass sich Elemente im Design überlappen. Hier sind einige Vorschläge als Referenz:

1. Äußere Elementpolsterung statt
2. Transparenter Rahmen des inneren Elements border:1px durchgehend transparent;
3. Innere Elemente werden mit position:absolute absolut positioniert:
4. Äußeres Element Überlauf: versteckt;
5. Fügen Sie den inneren Elementen float:left; oder display:inline-block hinzu.
6. Polsterung des inneren Elements: 1px;

Zusammenfassen

Oben ist die vom Editor eingeführte Methode zur Überlappung und Vermeidung von CSS-Rändern. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!