Démonstration graphique de l'analyse approfondie de la superposition de bordure de marge CSS

Démonstration graphique de l'analyse approfondie de la superposition de bordure de marge CSS_Experience Exchange

WBOY

Libérer： 2016-05-16 12:07:06

original

1787 Les gens l'ont consulté

La superposition de limites est un concept assez simple. Cependant, cela peut créer beaucoup de confusion lors de la mise en page des pages Web dans la pratique. En termes simples, lorsque deux frontières verticales se rencontrent, elles forment une frontière. La hauteur de cette limite est égale à la plus grande des hauteurs des deux limites superposées.

Lorsqu'un élément apparaît au-dessus d'un autre élément, la bordure inférieure du premier élément chevauche la bordure supérieure du deuxième élément, comme indiqué sur l'image :

La bordure supérieure de l'élément chevauche la bordure inférieure de l'élément précédent

Lorsqu'un élément est contenu dans un autre élément (en supposant qu'il n'y ait pas de remplissage ou de bordure séparant l'élément bordures ouvertes), leurs bordures supérieures et/ou inférieures sont également superposées, voir la photo :

La bordure supérieure d'un élément chevauche la bordure supérieure de son parent

Bien que cela puisse paraître un peu étrange au premier abord, la bordure peut même se chevaucher. Supposons que vous ayez un élément vide, qu'il ait une bordure, mais pas de bordure ni de remplissage. Dans ce cas, la limite supérieure et la limite inférieure se touchent et elles se chevaucheront, comme le montre l'image :

Les bordures supérieure et inférieure de l'élément se chevauchent

Si cette bordure touche la bordure d'un autre élément, elle se chevauchera également, comme le montre l'image :

La bordure superposée d'un élément vide chevauche la bordure d'un autre élément vide

C'est pourquoi une série d'éléments de paragraphe vides prennent très peu de place. les bordures sont additionnées pour former une petite bordure.

La superposition des bordures peut sembler un peu étrange au début, mais elle a du sens. Prenons, par exemple, une page de texte typique composée de plusieurs paragraphes (voir Figure 2-8). L'espace au-dessus du premier paragraphe est égal à la marge supérieure du paragraphe. Sans superposition de bordure, la bordure entre tous les paragraphes suivants serait la somme des bordures supérieure et inférieure adjacentes. Cela signifie que l'espace entre les paragraphes est deux fois plus grand que le haut de la page. En cas de chevauchement des bordures, les bordures supérieure et inférieure entre les paragraphes sont superposées, de sorte que les distances soient cohérentes partout

La superposition de bordure maintient une distance constante entre les éléments.

La superposition de bordure ne se produit qu'aux limites verticales des zones de bloc dans le flux normal de documents. Les limites entre les cases en ligne, les cases flottantes ou les cases en position absolue ne se chevauchent pas.

　Le problème de la superposition des bordures
La superposition des bordures est une fonctionnalité CSS qui peut causer beaucoup de problèmes si elle est mal comprise. Veuillez vous référer à l'exemple simple de paragraphes imbriqués dans des éléments div :

Copiez le code Le code est le suivant :

Ce paragraphe a une marge de 20px.

> La boîte div est définie sur une bordure de 10 pixels, le paragraphe définit une bordure de 20 pixels :

Copiez le code

Le code est comme suit : #box{ margin:10px;

background-color:#d5d5d5

p{ 
margin:20px; >background-color:#6699ff; 
} 


 On pourrait naturellement penser que le style résultant ressemblerait à la figure 1-1, avec un espace de 20 pixels entre le paragraphe et le div, et une bordure de 10 pixels autour de l'extérieur du div. 

Figure 1-1

Cependant, le style résultant ressemble en réalité à la figure 1-2.

Figure 1-2

Analyse approfondie de la superposition des bordures de marge CSS
[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 Leerzeichen nicht mehr und die Höhe des Elements entspricht dem Abstand zwischen der oberen und unteren Leerzeichenkante der enthaltenen untergeordneten Elemente.

Damit das vorherige Beispiel wie in 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;