Problème de transfert de chevauchement des marges supérieure et inférieure

J'ai découvert que le trouble obsessionnel-compulsif est vraiment une maladie grave pour moi. . . Toutes les situations doivent être testées à chaque fois. . . MAIS !!!!!!!!! Ce qui est triste, c'est que je ne me souviens pas de tant de situations. . . Je dois encore continuer à faire et à résoudre des erreurs lors de l'écriture de code ~ Je n'en peux plus ! Mais résumons cette partie ici~

Les parties suivantes devraient couvrir toutes les situations de problèmes de chevauchement de marge :

1. Les marges au-dessus et en dessous des éléments ordinaires. sera fusionné en une seule marge, quelle que soit celle qui sera choisie !

Deux éléments flottants n'auront pas de problème de transfert de marge. La marge inférieure de l'élément supérieur et la marge supérieure de l'élément inférieur sont toujours additionnées comme valeur de marge entre les deux.

2. Si deux éléments sont inclus, les valeurs de marge supérieure et inférieure de l'élément parent et de l'élément enfant seront également fusionnées (apprentissage recommandé : Tutoriel vidéo CSS)

当父元素不加边框，不设置宽高，即父级没有触发haslayout时	IE6、7和标准浏览器下，均会发生margin传递问题子元素和父元素的高度相同（子元素的top将和父元素的top在一条直线上，bottom将和父元素的bottom在一条直线上）而父元素则选择两者之间大的数值作为父元素的margin-top值和margin-bottom值！！！ 子元素的margin-left和margin-right值依然存在
当父元素不加边框，但是，设置宽或高或zoom：1；即父级加可以触发haslayout的属性时	标准浏览器下，会发生margin传递但是在IE6、7下则不会发生margin传递（即子元素的margin就是相对于父元素的，不会传递给父级）
当父级加边框，并且父级没有触发haslayout时	标准浏览器下，不会发生margin传递IE6、7下，子元素的margin彻底消失！
当父级加边框，并且父级触发haslayout（即加width或height或zoom：1）时，	IE6、7和标准浏览器下，都不会发生margin传递！！！

IE6 , 7 et navigateurs standards, des problèmes de transfert de marge se produiront. La hauteur de l'élément enfant et de l'élément parent sont les mêmes (le haut de l'élément enfant sera en une ligne droite avec le haut de l'élément parent, et le bas sera en ligne droite avec le bas de l'élément parent) L'élément parent sélectionne la plus grande valeur entre les deux comme valeur de marge supérieure et valeur de marge inférieure de l'élément parent ! ! ! Les valeurs margin-left et margin-right​​des éléments enfants existent toujours Lorsque l'élément parent n'ajoute pas de bordure, mais définit la largeur ou la hauteur ou le zoom : 1 ; c'est-à-dire lorsque l'élément parent ajoute un attribut qui peut déclencher haslayout td> Sous les navigateurs standards, le transfert de marge aura lieu, mais sous IE6 et 7, le transfert de marge n'aura pas lieu (c'est-à-dire que la marge de l'élément enfant est relative à l'élément parent) ne sera pas transmise au parent) Quand le parent Lorsqu'une bordure est ajoutée au niveau et que le parent ne déclenche pas haslayout Sous les navigateurs standards, ce ne sera pas le cas. Lorsque margin est passée à IE6 et 7, la marge de l'élément enfant disparaît complètement ! Lorsque le parent ajoute une bordure et qu'il déclenche haslayout (C'est-à-dire, ajoutez de la largeur ou de la hauteur ou zoomez : 1), IE6, 7 et navigateurs standards , la livraison sur marge n'aura pas lieu ! ! !

Pour IE6 et 7 :

C'est-à-dire tant que haslayout est déclenché, peu importe si une bordure est ajoutée ou non à l'élément parent, peu importe si margin est transmis dans les navigateurs standards, le transfert de marge ne se fera pas sous IE6 et 7 ! ! !

Et pour les navigateurs standards :

Seul l'ajout d'une bordure peut éviter le passage de marge ! ! !

Ajoutez une bordure à l'élément parent, il y aura alors une ligne de démarcation dans la marge entre l'élément enfant et l'élément parent, et aucune fusion ne se produira ! Si vous ajoutez une bordure à un élément enfant, les valeurs de marge des deux ne sont toujours pas séparées, donc un chevauchement se produira toujours !

Si l'élément parent contient ici plusieurs sous-éléments de bloc et que les marges supérieure et inférieure se chevauchent entre chaque sous-élément, sélectionnez la plus grande marge entre les deux comme marge entre les deux, le premier sous-élément Le haut de l'élément chevauche l'élément parent (la zone blanche au-dessus de l'image de gauche est la zone blanche du haut du navigateur) et le bas du dernier élément enfant chevauche l'élément parent. Les effets d'affichage des navigateurs IE6, 7 et standards sont tels qu'indiqués à gauche.

À ce stade, si les deux éléments de bloc sont des éléments flottants, alors il n'y a pas de transfert de marge entre l'élément enfant et l'élément parent. À ce moment, les valeurs de marge supérieure et inférieure ​​​​​sont entre les deux. Les valeurs de marge respectives s’additionnent ! Le navigateur standard s'affiche comme indiqué dans l'image ci-dessous et IE6 s'affiche comme indiqué à droite de l'image ci-dessous. Mais pourquoi l’affichage diffère-t-il ?

Parce que, OMG ! Les vagues se succèdent ! Les éléments de bloc, les marges horizontales et les flottants ont provoqué un nouveau problème de compatibilité dans IE6 - le bug de double marge (notez que IE7 n'a pas de bug de double marge !!!!)

Ainsi

En pratique, vous devez d'abord ajouter l'attribut qui déclenche haslyout à l'élément parent ! Cet article garantit que les problèmes de transfert de marge et de disparition de la valeur de marge ne se produiront pas sous IE6 et 7

Ensuite, considérez que sous les navigateurs standards, l'ajout de flottants aux éléments enfants peut résoudre le problème de pas de bordure.Il y a un problème de transfert de marge qui se produit lors de l'ajout d'un flottant, mais l'ajout d'un flottant à ce moment provoquera un bug de double marge dans IE6. Par conséquent, dans la pratique, nous essayons de remplacer la marge de l'élément de bloc flottant par. padding. S'il ne peut pas être modifié, ajoutez display: inline à l'élément ;!

3. Il n'y a pas de valeur de marge entre le haut et le bas de deux divisions (A, B), mais il y a un sous-élément dans A qui a actuellement une valeur de marge. du sous-élément sera transmis aux deux. Remplira la marge entre les deux éléments A et B, uniquement dans le sens vertical ! ! !

Pour cette question, c’est tout. C’est en fait très simple, je viens de lister toutes les situations. En fait, le résumé est le contenu du résumé ci-dessus.

Je pense que ce transfert de marge et ce chevauchement sont dus au fait qu'il n'y a pas de frontière entre les deux valeurs de marge ou qu'un remplissage sépare la zone de marge ! ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!