Grafische Demonstration der eingehenden Analyse des CSS-Margin-Border-Overlays_Experience-Austauschs-CSS-Tutorial-php.cn

Grafische Demonstration der eingehenden Analyse des CSS-Margin-Border-Overlays_Experience-Austauschs

WBOY

Freigeben： 2016-05-16 12:07:06

Original

1747 Leute haben es durchsucht

Grenzüberlagerung ist ein ziemlich einfaches Konzept. Allerdings kann es bei der Gestaltung von Webseiten in der Praxis zu großer Verwirrung führen. Einfach ausgedrückt: Wenn zwei vertikale Grenzen aufeinandertreffen, bilden sie eine Grenze. Die Höhe dieser Grenze ist gleich der größeren der Höhen der beiden übereinanderliegenden Grenzen.

Wenn ein Element über einem anderen Element erscheint, überlappt der untere Rand des ersten Elements mit dem oberen Rand des zweiten Elements, wie im Bild gezeigt:

Der obere Rand des Elements überlappt den unteren Rand des vorhergehenden Elements

Wenn ein Element in einem anderen Element enthalten ist (vorausgesetzt, es gibt keinen Abstand oder Rand, der die Elemente trennt). Grenzen offen), ihre oberen und/oder unteren Grenzen werden ebenfalls überlagert, siehe Bild:

Der obere Rand eines Elements überlappt den oberen Rand seines übergeordneten Elements

Auch wenn es zunächst etwas seltsam erscheinen mag, kann sich der Rand sogar selbst überlappen. Angenommen, Sie haben ein leeres Element, es hat einen Rand, aber keinen Rand oder Abstand. In diesem Fall berühren sich die obere Grenze und die untere Grenze und überlappen sich, wie im Bild gezeigt:

Der obere und untere Rand des Elements überlappen sich

Wenn dieser Rand den Rand eines anderen Elements berührt, überlappt er sich ebenfalls, wie im Bild gezeigt:

Der überlappende Rand eines leeren Elements überlappt den Rand eines anderen leeren Elements

Aus diesem Grund nehmen eine Reihe leerer Absatzelemente nur sehr wenig Platz ein Ränder werden zu einem kleinen Rand zusammengefügt.

Die Randüberlagerung mag auf den ersten Blick etwas seltsam erscheinen, macht aber tatsächlich Sinn. Nehmen Sie zum Beispiel eine typische Textseite, die aus mehreren Absätzen besteht (siehe Abbildung 2-8). Der Abstand über dem ersten Absatz entspricht dem oberen Rand des Absatzes. Ohne Randüberlagerung wäre der Rand zwischen allen nachfolgenden Absätzen die Summe der angrenzenden oberen und unteren Ränder. Das bedeutet, dass der Abstand zwischen den Absätzen doppelt so groß ist wie der obere Rand der Seite. Wenn es zu Randüberlappungen kommt, werden die oberen und unteren Ränder zwischen den Absätzen überlagert, sodass die Abstände überall einheitlich sind

Randüberlagerung sorgt für einen konsistenten Abstand zwischen Elementen

Randüberlagerung tritt nur an den vertikalen Grenzen von Blockfeldern im normalen Dokumentenfluss auf. Die Grenzen zwischen Inline-Boxen, schwebenden Boxen oder absolut positionierten Boxen überlappen sich nicht.

　Das Problem der Randüberlagerung
Die Randüberlagerung ist eine CSS-Funktion, die bei Missverständnis viel Ärger verursachen kann. Bitte beachten Sie das einfache Beispiel für verschachtelte Absätze innerhalb von div-Elementen:

Kopieren Sie den Code Der Code lautet wie folgt:

Dieser Absatz hat einen Rand von 20 Pixel.

div-Box ist auf einen 10-Pixel-Rahmen festgelegt, der Absatz legt einen 20-Pixel-Rahmen fest:

Kopieren Sie den Code Der Code ist wie folgt:

#box{

margin:10px; >background-color:#6699ff; 
} 

 Sie würden natürlich denken, dass der resultierende Stil wie Abbildung 1-1 aussehen würde, mit einem Abstand von 20 Pixeln zwischen dem Absatz und dem Div. und ein 10-Pixel-Rand um die Außenseite des Div. 

Abbildung 1-1

Der resultierende Stil sieht jedoch tatsächlich wie Abbildung 1-2 aus.

Abbildung 1-2

Eingehende Analyse der CSS-Randrandüberlagerung

[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Hier sind zwei Dinge passiert. Bedingung. Zunächst überlappen die oberen und unteren 20-Pixel-Ränder des Absatzes mit dem 10-Pixel-Rand des Divs, um einen einzigen vertikalen 20-Pixel-Rand zu bilden. Zweitens sind diese Ränder nicht vom DIV umgeben, sondern ragen über die Ober- und Unterkante des DIV hinaus. Dieses Verhalten tritt aufgrund der Art und Weise auf, wie Elemente mit untergeordneten Elementen auf Blockebene ihre Höhe berechnen.

Wenn ein Element keinen vertikalen Rand oder Abstand hat, ist seine Höhe der Abstand zwischen der oberen und unteren Randkante seiner enthaltenden untergeordneten Elemente. Daher ragen der obere und der untere Rand des enthaltenden untergeordneten Elements über das Containerelement hinaus. Es gibt jedoch eine einfache Lösung. Durch das Hinzufügen eines vertikalen Rahmens oder einer Auffüllung überlappen sich die Ränder nicht mehr und die Höhe des Elements ist der Abstand zwischen der oberen und unteren Randkante der darin enthaltenen untergeordneten Elemente.

Damit das vorherige Beispiel wie Abbildung 1-1 aussieht, fügen Sie einfach einen Abstand oder einen Rahmen um das Div hinzu:

Code kopieren Der Code lautet wie folgt:

#box{ 
margin:10px; 
padding:1px;/*or border:1px solid color;*/ 
 background -color:#d5d5d5;  
}  
margin:20px;   
background-color:#6699ff; 

 Ergänzende Lösung: 

Code kopieren

Der Code lautet wie folgt: 1. Äußerer Abstand 2. Transparenter Rand border:1px solid transparent

3. Absolute Positionierungsposition:absolute:

 5. Innerer DIV Add float:left; display:inline; 
 6. Der äußere DIV verwendet manchmal zoom:1;