Compréhension approfondie de la façon d'utiliser la marge en CSS

1.css marge peut changer la taille du conteneur
Taille de l'élément
Taille visible - la largeur de la boîte dans le modèle de boîte standard n'inclut pas la valeur de la marge, clientWidth
Taille occupée - y compris la largeur de la marge outWidth n'est pas dans la norme, il existe une méthode correspondante dans jquery

margin et taille visuelle
1.1 Utiliser l'élément horizontal de bloc ordinaire qui ne définit pas la largeur/hauteur
2.2 S'applique uniquement aux dimensions horizontales
　background-color :#1a2b3c">
　　　

　　  Texte


　　 　　
　　 La largeur de la boîte changera lorsque la valeur de la marge est modifiée.

Application : implémenter une mise en page adaptative avec une largeur fixe sur un côté
 S'applique aux éléments horizontaux de bloc/bloc en ligne 　　　 La taille est devenue plus petite.
Profitez de cette fonctionnalité Laissez de l'espace au-dessus et en dessous du conteneur de défilement ="300"> 　　　

　　 La boîte intérieure s'ouvre et la zone extérieure affiche la barre de défilement. Bien sûr, cela n'a pas d'effet d'espace blanc dans les navigateurs non chromés (il y en a ci-dessus).

L'approche correcte est

p>

Chapitre 2 : marge CSS et unité de pourcentage - comprendre l'unité de pourcentage de marge
Pourcentage horizontal/pourcentage vertical
　　Pourcentage d'élément ordinaire/Pourcentage d'élément absolu


　　　Règles de calcul de marge en pourcentage
　　　 img{margin:10%;with:600px;heigth:200px;}
La marge en pourcentage des éléments ordinaires est calculée par rapport à la largeur du conteneur ! Donc la marge ici : 10%;---->
top:60px, left:60px; sont toutes calculées par rapport à la largeur du conteneur.

　　　Positionnement absoluLa marge en pourcentage de l'élément
　　　 img{margin:10%; position:absolute;>
La marge en pourcentage de l'élément absolu est relative au premier L'élément ancêtre de l'élément positionné a une largeur (relative/absolue/fixe) calculée. Les éléments ordinaires sont calculés par rapport à leur élément parent.
　　　

="marge:10%;position:absolue;"

  
   .box{background-color:olive;
overflow
:hidden;}
   .box > Un autre point en jeu ici est le chevauchement des marges. Le débordement est défini ici pour empêcher le chevauchement des marges
Chapitre 3 Caractéristiques communes du chevauchement des marges 1. Bloquer les éléments horizontaux (à l'exclusion des éléments flottants et absolus)
2. Ne pas considérer le
mode d'écriture

(Le sens d'écriture du texte est de haut en bas), ne se produit que dans le sens vertical (

marge-haut
/
marge-bas) Chevauchement des marges 3 situations 1. Éléments frères et sœurs adjacents p{line-height

:2em;margin:1em 0;background:#f0f3f9;>

Première ligne

　　

　　 Définir une marge pour le premier ou le dernier élément enfant équivaut à définir la même valeur de marge pour l'élément parent. L'élément enfant a la même marge et l'élément enfant a la même valeur de marge que. l'élément parent 3. Élément de bloc vide
　　 .father{background:#f0f3f9}
　　

　　　

< /p>
　　

　　　 La taille du fils ici n'est que de 1em, pas 2em
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      　　 　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　sauvegarder dans sur 'taille du fils' 　　 　　 　　 　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Craft Up in in in ininging in on in on in ons in on in on in on opaque elements >> 1. L'élément n'a pas de paramètre de bordure
2. l'élément n'a pas de valeur de remplissage
3. Il n'y a pas d'élément en ligne
à l'intérieur. ou
min-height



🎜> 1.2 L'élément parent n'a pas de paramètre de bordure supérieure
1.3 L'élément parent n'a pas de valeur
padding-top

1.4 Il n'y a pas de séparation d'éléments en ligne entre l'élément parent et le premier élément enfant

　　Chevauchement marge-bas
　　　　1.1 Élément parent élément de contexte de formatage sans bloc
　　　　　1.2 Élément parent sans paramètre de bordure inférieure
　　　　1.3 Élément parent sans padding-bottomvaleur
1.4 Il n'y a pas de séparation d'élément en ligne entre l'élément parent et le dernier élément enfant
1.5 L'élément parent n'a pas de hauteur, de hauteur min, de hauteur maximale Limitations
Supprimez margin-top chevauchement
. père{background:#f0f3f9}
　　　

　　　　

son< /p>
　　　　

     1. L'élément parent est un élément de contexte de formatage sans bloc.father:overflow:hidden;
    2. L'élément parent n'a pas de paramètre de bordure supérieure
     .father:border:4px solid # ccc;
3. L'élément parent n'a pas de valeur de remplissage supérieure
4. Il n'y a pas de séparation d'élément en ligne entre l'élément parent et le premier élément enfant
　　< ;p class="père"> 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　int -Le même que top,
　　　　　

 
;/p>
　　　　　

　 Règles de calcul pour le chevauchement des marges
　　 　　1. Prenez la plus grande valeur positive

　　　　.a{margin-bottom:50px;}

　　　　.b {marge- top:20px;}
　　　　

　　　　

.père{ margin-top:20px;}
　　　 .son{margin-top:50px;}

　　　

　　　　

< ;/p> ;
　　　

　　　.a{margin-top:20px;margin-bottom:50px}
　　　

Les résultats ci-dessus sont margin:50px;
2. Ajoutez des valeurs positives et négatives

.a{margin-bottom:50px;}

.b{margin-top:- 20px;}
　　　

　　　

　　 .father{margin-top:-20px ;}
　　 .son{margin-top:50px;>

　　　

　　　

;/p>

　　　.a{margin-top:-20px;margin-bottom:50px>
　　> Les résultats ci-dessus sont tous de 30px
3. La valeur la plus négative

.a {margin-bottom:-50px;}

.b{margin-top:-20px;}
　　< p class="a">

　　

　　.father{margin-top:-20px;}
　　.son{margin-top:-50px;}
　　

　　　

　　
　　 .a{margin-top:-20px;margin-bottom:- 50px}
　　

　　 Les résultats ci-dessus sont tous -50px
Quelle est la signification du chevauchement des marges ?

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1. Paragraphes ou listes continus, s'il n'y a pas de chevauchement de marge, l'espacement entre le premier et le dernier élément sera de 1:2 avec d'autres balises frères et sœurs, et la mise en page ne sera pas naturelle
2. Imbriqué ou directement ; mettre des éléments nus n'importe où sur le Web p n'affectera pas la mise en page originale
3. L'élément p manquant n'affecte pas la mise en page de lecture originale

Pratique :
Faire bon usage du chevauchement des marges
.list{margin-top:15px;}
Meilleure implémentation de
.list{
margin- haut : 15px;
　　　　　　marge-bas:15px;
Chapitre 4 : Comprendre margin:auto en CSS
　　Le mécanisme de margin:auto
　　Les éléments seront parfois remplis automatiquement même si la largeur ou la hauteur ne sont pas définies
　　p{background:#f0f3f9}

Si vous définissez la largeur ou la hauteur, la fonction de remplissage automatique sera remplacée

p{width:500px;background:#f0f3f9;>

La valeur de marge à ce moment est 0px
largeur ou hauteur, la fonction de remplissage automatique sera remplacée.

La taille d'origine qui doit être remplie est modifiée de force en largeur/hauteur, et margin: auto est configuré pour remplir cette taille modifiée

p{width:500px;marign-

right :100px;margin-left:auto;}
Si un côté est fixe, un côté est automatique et auto est la taille de l'espace restant. Si les deux côtés sont automatiques, l'espace restant sera divisé. également

Pourquoi L'image img{width:200px;marign:0 auto} n'est pas centrée

Parce que l'image est en ligne horizontale, même s'il n'y a pas de largeur, elle n'occupera pas tout le conteneur.

Set img{

display
:block;width:200px;marign:0 auto;}
Parce que l'image est en bloc horizontale à ce moment, même s'il n'y a pas de largeur, elle occupera le conteneur entier et ne peut pas être affiché sur une seule ligne.
Pourquoi est-il évident que la hauteur du conteneur est fixe et la marge de hauteur de l'élément : auto 0 ne peut pas être centré verticalement

.father{height:200px;background:#f0f3f9;}
.son{ height:100px; width:500px;margin:auto;}

Il est centré horizontalement, mais pas verticalement.

Explication : Si .son ne définit pas height:100px ; la hauteur sera-t-elle automatiquement haute de 200px ? ——NO Par conséquent, la marge ne peut pas être automatiquement remplie. La largeur et la hauteur sont forcées à être définies, elle ne sera donc pas automatiquement remplie.
Remarque : Si l'enfant est plus grand que le parent dans le sens horizontal, il ne sera pas centré même si le résultat du calcul est une valeur négative.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ulous dans le sens vertical margin:auto

　　　 .father{height: 200px width:100%;>

　　 .son{height:100px; ;width:500px;margin:auto;}
　　 L'absolu et la marge sont centrés
　　 .father{height: 200px;position:relative;>
.son{position:absolute top:0px right:0px bottom; :0px;left:0px}
.son n'a pas de largeur/hauteur et l'élément absolu remplit automatiquement le conteneur.

Lorsque la largeur et la hauteur sont définies
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px ;width:500px;height:100px;}
Auparavant, il était étiré et étendu, mais il est maintenant rétracté.

Définissez margin:auto ; répartissez uniformément l'espace étiré pour obtenir un centrage horizontal et vertical

.father{height:200px;position:relative;}
.son{position:absolute; bas :0px;gauche:0px;largeur:500px;hauteur:100px;marge:auto;}

Supporte IE8+ et supérieur !
Chapitre 5 : Positionnement de la marge CSS avec des valeurs négatives
1. Alignement des deux extrémités avec une marge négative (la marge modifie la taille de l'élément)
Exemple
.box{
width:1200px margin: auto; ;background:orange;
.ul{overflow:hidden;}
.li{
width:380px;height:300px;
x; background:green; float : left;
}
}
Le dernier de la liste implémentée laisse un vide.
　　　La taille du conteneur est modifiée en utilisant une valeur de marge négative pour élargir le conteneur. Peut parfaitement résoudre ce problème.
largeur:386,66px;hauteur:300px;
margin-right:20px;
background:vert;
float:left;
float:left;
}
}
2.margin est négatif La marge de disposition de hauteur égale sous la valeur modifie l'espace occupé par l'élément
　　Marge et marges supérieure et inférieure
　　

　　
　　

　　.box{overflow:hidden;resize:vertical;}
　　.child- orange,
　　.child-green{margin-bottom :-600px;padding-bottom:600px;}
　　.child-orange{float:left;background:orange;>
　　.child-green{float :left;background:green;}

En définissant une grande valeur de marge négative et un grand padding-bottom pour remplir l'espace manquant, une disposition de même hauteur est obtenue. Principe : Les éléments du bloc de contenu peuvent être affichés en padding Tant que

n'est pas défini, background:
clip

, box-sizing:content

3. Adaptation sur deux colonnes sous négatif. valeurs de marge Disposition, les éléments occupent de l'espace et se déplacent avec la marge

　　

　　　

Image Flottant à droite

　　

　　

Chapitre 6 : Analyse d'une situation marign CSS invalide
1. La marge verticale des éléments horizontaux en ligne n'est pas valide
2 prérequis 1. Éléments non remplaçants, tels que les éléments not img 2. Mode d'écriture normal
Exemple

marign:0px

La définition de margin233px;
pour span est valide horizontalement mais invalide verticalement.
2.Les marges se chevauchent
3.display:table-cell
display:table-cell/display:tab-row et les autres marges de déclaration ne sont pas valides !

Éléments de remplacement d'exception img, bouton

4. Position et marge
La valeur de marge de la direction non positionnée de l'élément positionné de manière absolue est "invalide"
La valeur de marge de l'élément positionné de manière absolue est toujours valide, pas comme les éléments normaux.
5. La marge hors de portée échoue

S'il y a un élément flottant devant le bloc de contenu bfc, la marge de l'élément suivant est calculée par rapport au p externe.

6. Échec de la marge causé par l'inlining
p[style="height:200px;background-color:#f0f3f9;"]>img[style="marign-top:30;"]
Il échoue lorsque la marge supérieure est suffisamment grande.
Explication : les éléments en ligne doivent être alignés avec la ligne de base. L'ajout d'un x après l'image montre que quelle que soit la distance en haut de la marge, elle ne quittera pas l'extérieur du conteneur.

Chapitre 7 margin-start et margin-end
　　margin-start
　　img{
　　margin-left：100px;
　　-webkit-margin-start:100px ;
　　　 -moz-margin-start:100px;
　　 　　margin-sart:100px
2. Si le flux horizontal va de droite à gauche, margin-start équivaut à margin-right
direction ;
:ltr(rtl) 3. Sous flux vertical (writring-mode:vertical-lr ), margin-sart est équivalent à margin-top Autres attributs liés à la marge sous webkit
margin-
avant
img{-webkit-margin-before:100px;} direction du flux par défaut Dans ce cas, cela équivaut à margin-top 　　　margin-after
　　　 img{-webkit- marign-after:100px;} Dans le cas de la direction d'écoulement par défaut, cela équivaut à margin-bottom;
　　 margin-collapse La bordure extérieure se chevauche
-webkit-margin-collapse: cliff|discard|separate
Contrôler le chevauchement des marges
réduire le chevauchement par défaut
supprimer

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!