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
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
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
marge-haut
/
marge-bas) Chevauchement des marges 3 situations 1. Éléments frères et sœurs adjacents p{line-height
Première ligne
< /p>
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>
;/p>
.b {marge- top:20px;}
< ;/p> ;
Les résultats ci-dessus sont margin:50px;
2. Ajoutez des valeurs positives et négatives
.b{margin-top:- 20px;}
;/p>
.b{margin-top:-20px;}
< p class="a">
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
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
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
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;}
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
.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é.
.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
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
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
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
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!
Comment acheter de vraies pièces Ripple
Pourquoi le wifi a-t-il un point d'exclamation ?
des centaines
Que dois-je faire si msconfig ne peut pas être ouvert ?
Type de vulnérabilité du système
Introduction aux raisons pour lesquelles le bureau à distance ne peut pas se connecter
horodatage python
La différence entre la charge rapide PD et la charge rapide générale
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
