Marge de l'attribut CSS

0. Impact sur sa propre largeur visuelle

1> Modifier la largeur visuelle de l'élément de bloc dans le flux de documents standard sans valeur de largeur définie

Dans le flux de documents standard, pour un élément de bloc qui n'a pas de largeur définie, lorsqu'il a du contenu ou qu'une hauteur est définie, sa propre largeur est de 100 % de la largeur de l'élément parent. À ce stade, définissez la. valeur de marge horizontale pour l’élément de bloc. Changera la largeur visuelle de l’élément. Mais la hauteur ne peut pas être modifiée, car la hauteur de l'élément de bloc est fixe ou égale à la hauteur de son contenu et ne s'étirera pas.

Cette fonctionnalité est utile dans la mise en page bootstrap.

<p class="wrap">
  父元素padding: 0 10px;  <p class="yellow">此block元素没有设置margin值</p>
  <p class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}.yellow {
  height: 100px;
  background-color: yellow;  
}

2> Largeur, mais la largeur et la hauteur visibles d'un élément en position absolue avec positionnement (positionnement défini par paires, comme haut/bas, gauche/droite)

Lorsque l'élément en position absolue n'a pas de largeur définie, mais haut est défini / bas, valeur gauche / droite, l'élément sera étiré. Par exemple, si vous définissez left:0; right:0;, la largeur de l'élément sera 100 % de la largeur du premier élément parent relativement positionné. À ce stade, vous pouvez également modifier la largeur visuelle de l'élément via. marge. De même, pour les éléments positionnés de manière absolue, on peut également modifier sa hauteur visuelle.

<p class="wrap">
  父元素position: relative;  <p class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素，通过设置margin来改变可视高度</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

1. La marge avec une valeur en pourcentage

est identique au remplissage pour les éléments qui se trouvent normalement dans le flux de documents standard, lorsque la valeur de marge de l'élément est une valeur en pourcentage, sa valeur réelle est égale à la largeur. de l'élément parent * pourcentage ;

Lorsqu'un élément est défini en positionnement absolu, sa valeur réelle est égale à la largeur * pourcentage du premier élément parent positionné par rapport à lui

<p class="wrap">
  父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

2.chevauchement de marge

un chevauchement de marge se produit généralement entre les éléments frères et entre les éléments parents et enfants. Si vous n'y prêtez pas attention, le chevauchement des marges peut souvent nous causer des problèmes mineurs. Voici un résumé des situations dans lesquelles le chevauchement des marges se produit.

1>Entre les éléments frères

Lorsque deux éléments ont une marge qui se chevauche, leurs valeurs réelles :

1. Lorsque deux valeurs de marge Lorsque les deux sont positives, la valeur réelle = la plus grande des deux

2. Lorsque les deux valeurs de marge sont une positive et une négative, la valeur réelle = la somme des deux valeurs

3. Lorsque les deux valeurs de marge sont négatives, la valeur réelle = la plus grande valeur absolue des deux

Quand le chevauchement des marges se produira-t-il ?

Pour deux éléments frères adjacents, tant qu'ils sont des éléments de bloc dans le flux de documents standard, un chevauchement des marges se produira dans la direction verticale.

2>Entre l'élément parent et le premier/dernier élément enfant

1. Définir la bordure haut/bas

2. Définir padding-top/bottom

3. Définissez des attributs tels que overflow:hidden/auto pour réaliser la valeur automatique de BFC

3.margin

Définir la marge : 0 auto ; pour qu'un élément de bloc de largeur fixe centre l'élément horizontalement. Cela devrait être couramment utilisé par de nombreuses personnes, mais peu de personnes connaissent le rôle spécifique de la valeur automatique.

Pour faire simple, pour les éléments qui n'ont pas de valeur fixe de largeur ou de hauteur, s'ils peuvent être automatiquement étirés, une fois qu'une valeur fixe est définie, auto peut être utilisé pour allouer l'espace restant.

Cela semble un peu difficile à prononcer. Par exemple, il y a un élément block avec une largeur fixe, nous voulons qu'il soit affiché sur le côté droit. La méthode la plus couramment utilisée consiste à utiliser l'attribut float, mais cela peut aussi être réalisé avec margin-left: auto;:

<p class="wrap">
  <p class="red">margin-left: auto;</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: auto;
}

Définir la valeur de marge sur auto Les scénarios valides incluent :

1. Éléments de bloc ordinaires à largeur fixe, valides lorsqu'ils sont définis dans la direction horizontale ;

2. Éléments positionnés de manière absolue, lorsque l'appariement à gauche est défini Lorsque /right, top/bottom ou les deux sont définis, la largeur fixe ou la hauteur fixe est valide

3. Lorsque le l'élément parent est display : flex ;, la valeur de marge de l'élément enfant est auto est valide

Pour plus d'articles sur la marge des attributs CSS, veuillez faire attention au site Web PHP chinois !