Une compréhension approfondie des éléments de marge CSS-tutoriel CSS-php.cn

Une compréhension approfondie des éléments de marge CSS

高洛峰

Libérer： 2017-03-15 10:49:18

original

1577 Les gens l'ont consulté

Les mots précédents

marge est un attribut très spécial parmi plusieurs attributs du modèle de boîte. Juste pour donner quelques exemples : seule la marge n'affiche pas l'arrière-plan de l'élément actuel, seule la marge peut être définie sur une valeur négative, la marge, la largeur et la hauteur prennent en charge automatiquement, et la marge a des caractéristiques de chevauchement très étranges. Les articles de blog précédents ont présenté en détail les connaissances de base de la marge et l’utilisation détaillée de la marge négative. Cet article présentera en détail les éléments clés de la marge extérieuremarge, y compris les conditions de chevauchement, automatiques et invalides

chevauchement

[prérequis]

Le chevauchement des marges est également appelé fusion de marges. Il y a deux conditions préalables pour que cela se produise

1. Cela ne se produit que sur les éléments de bloc (à l'exclusion de float, absolu et inline-block. éléments)

2. Ne se produit que dans la direction verticale (quel que soit le mode d'écriture)

【Classification】

Le chevauchement des marges comprend les 3 éléments suivants types Situation

1. Éléments frères et sœurs adjacents

<style>
p{
    line-height: 2em;
    margin:1em 0;
    background-color: lightblue;
    display:inline-block;
    width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

Copier après la connexion

2. L'élément parent et le premier ou le dernier élément enfant, les marges parent-enfant se chevauchent à nouveau. transfert de marge

<style>
.box{
    background-color: pink;
    height:30px;
}
.inner{
    margin-top: 1em;
    background-color: lightblue;
}
</style>
<p class="box">
    <p class="inner">子级</p>
</p>

Copier après la connexion

condition

Par rapport au chevauchement de marge des éléments frères et sœurs adjacents, le chevauchement de marge parent-enfant doit remplir les conditions suivantes (marge-haut chevauchement (exemple) :

a. L'élément parent n'est pas un élément BFC

b. L'élément parent n'a pas de valeur padding-top

c. L'élément parent Il n'y a pas de border-top value

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

S'il s'agit d'un niveau parent-enfant margin -bottom se chevauche, l'élément d est remplacé par aucune séparation d'élément en ligne entre l'élément parent et le dernier élément enfant, et l'élément parent ne doit pas non plus avoir de hauteur, min-height et max- heightlimit

3. Élément de bloc vide

<style>
.box{
    background-color: lightgreen;
    overflow: hidden;
}   
.void{
    margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
    <p class="void"></p>
</p>
一行文字

Copier après la connexion

À partir des résultats ci-dessous, cela peut être vu. que l'élément de bloc vide doit étendre la marge supérieure parent-bas d'un total de 2 em de hauteur, mais en raison du chevauchement des marges, il n'est que de 1 em

De même, certaines conditions doivent être remplies pour le chevauchement des marges. d'éléments de bloc vides

a. L'élément n'a pas de valeur de bordure

b L'élément n'a pas de valeur de remplissage

Il n'y a pas d'élément en ligne à l'intérieur de

d. Il n'y a pas de hauteur ou de hauteur minimale

【Règle】

Deux marges verticales extérieures, le navigateur prend la plus grande valeur si les deux marges verticales sont définies sur des valeurs négatives, le navigateur choisira la valeur absolue maximale des deux marges ; si une marge positive est combinée avec une marge négative, la marge positive sera utilisée soustraire la valeur absolue de cette marge négative

En termes simples, cela signifie. en prenant la plus grande valeur positive, en ajoutant les valeurs positives et négatives, et la valeur la plus négative

【Objectif】

Dans la mise en page Web, en raison du chevauchement des marges, nous considèrent souvent la marge comme un « style problématique » et l’utilisent le moins possible. Mais en fait, il joue un grand rôle

Le document HTML a été créé à l'origine pour afficher des informations. En partant du principe que le document HTML utilise uniquement le style par défaut, si les marges supérieure et inférieure ne se chevauchent pas, les problèmes suivants se produiront : 1. Pour les paragraphes ou listes continus, s'il n'y a pas de chevauchement de marge, l'espacement entre le premier et les derniers éléments apparaîtront 1 avec d'autres éléments frères : 2, la mise en page n'est pas naturelle ; 2. L'imbrication ou le placement direct d'un p nu n'importe où sur le Web affectera la mise en page originale, ce qui est contraire aux principes de conception du Web. ; 3. Le p vide est laissé derrière. Toute balise p multiple affectera la disposition de lecture originale

Nous devons donc faire bon usage du chevauchement, et nous pouvons utiliser margin-top et margin-bottom en même temps. dans les éléments de la liste. De cette façon, la structure de la page est plus robuste, et la suppression ou le positionnement du dernier élément ne détruira pas la mise en page originale

[Nouvel attribut]

-webkit-margin- effondrement

-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)

Copier après la connexion

Cet attribut est utilisé pour définir si la marge se chevauche et agit sur l'un des deux éléments où se produit le chevauchement des marges. Si les deux utilisent cet attribut, l'un est défini pour être supprimé et l'autre est défini pour se séparer, l'effet final est un chevauchement collase

auto

uniquement largeur/hauteur et marge Auto peut être réglé. Des informations détaillées sur auto ont été introduites en détail dans le formatage visuel CSS. Ce qui suit présente uniquement la partie sur margin:auto

【Pourquoi margin:auto ne peut pas réaliser le centrage vertical】

La largeur de l'élément au niveau du bloc est par défaut pour remplir l'élément parent , si vous définissez une valeur fixe pour la largeur et définissez les marges gauche et droite sur automatique, vous pouvez diviser l'espace restant de manière égale

La direction verticale ne peut pas être centrée car la hauteur de l'élément au niveau du bloc est par défaut la hauteur du contenu, qui n'est pas directement liée à la hauteur de l'élément parent. Lorsque les marges supérieure et inférieure sont définies sur automatique, elles le seront. être réinitialisé à 0

[Pourquoi les images ne peuvent pas être centrées horizontalement lors de l'utilisation de margin:auto]

Les images ne peuvent pas être centrées horizontalement, comme les éléments de niveau bloc qui ne peuvent pas être centré verticalement. Parce que la largeur de l'image est par défaut sa propre largeur et n'est pas directement liée à la largeur de l'élément parent. Si les marges gauche et droite sont définies sur automatique, elles seront réinitialisées à 0

Ainsi, pour centrer l'image horizontalement, vous devez la définir sur display:block element

【Atteindre la verticale centrage】

Utilisez margin:auto pour obtenir un centrage vertical. Il existe deux méthodes :

1. Utilisez writing-mode:vertical-lr

writing-mode représente la page. direction du flux, et la valeur par défaut est horizontale. Après être passé à la direction verticale, le centrage vertical peut être obtenu, mais le centrage horizontal n'est plus

2. Remplacez l'élément par un élément absolument positionné (le navigateur IE7 ne le prend pas en charge)

Après avoir transformé l'élément en élément à position absolue, définissez top:0;bottom:0; de sorte que l'élément à position absolue ait une relation directe avec la hauteur du parent positionné. Ensuite, définissez margin:0 auto; pour que margin-top et margin-bottom divisent également l'espace restant pour obtenir l'effet de centrage vertical

Situation invalide

1. Les éléments en ligne sont verticaux. La marge n'est pas valide

Étant donné que la disposition verticale des éléments en ligne est principalement affectée par la hauteur de ligne et l'alignement vertical alignement vertical, la marge verticale ne les affectera pas, elle le fera donc. n'affecte pas la disposition verticale. En mode d'affichage, la zone de marge n'affichera pas l'arrière-plan de l'élément, cela n'affectera donc pas l'affichage de ses propres éléments, donc la marge verticale des éléments en ligne n'est pas valide

[Note] Ne pas inclure inline-block ou définissez le mode d'écriture sur vertical -lr case

2. La marge de certains éléments de classe table n'est pas valide

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th> la marge ne peut pas être définie. Pour l'attribut display, display est un type lié au tableau (à l'exclusion du tableau-caption, du tableau, du tableau en ligne) et l'instruction de marge n'est pas valide

3. La valeur de marge de la direction non positionnée du l'élément en position absolue semble invalide

La valeur de marge du positionnement absolu est toujours valide, mais comme l'élément en position absolue est hors du flux de documents et n'a rien à voir avec d'autres nœuds d'éléments, l'effet n'est pas visible

4. Marge causée par BFC semble invalide

Lorsque l'élément de gauche utilise float et que l'élément de droite utilise overflow-hidden pour implémenter une mise en page adaptative à deux colonnes, l'élément de droite margin-left L'effet ne peut être vu que si la valeur est suffisamment grande. En effet, margin-left est relatif au côté gauche de l'élément parent, pas au côté droit de l'image

5. Marge invalide causée par des fonctionnalités en ligne

Un p contient une image, quand Lorsque la marge supérieure de l'image atteint une certaine valeur, l'image ne se déplace plus vers le haut. En effet, l'image est un élément en ligne, qui est soumis à la fonction d'alignement vertical de l'élément en ligne. Alignement de la ligne de base par défaut. Prenons l'exemple de l'hypothétique caractère X majuscule sur la page >

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!