CSS-Attributmarge

0. Auswirkung auf die eigene visuelle Breite

1> Ändern Sie die visuelle Breite des Blockelements im Standarddokumentfluss, ohne dass ein Breitenwert festgelegt ist

Im Standarddokumentfluss beträgt die eigene Breite für ein Blockelement, für das keine Breite festgelegt ist oder dessen Höhe nicht festgelegt ist, 100 % der Breite des übergeordneten Elements. Legen Sie zu diesem Zeitpunkt fest Horizontaler Randwert für das Blockelement. Ändert die visuelle Breite des Elements. Die Höhe kann jedoch nicht geändert werden, da die Höhe des Blockelements fest oder gleich der Höhe seines Inhalts ist und nicht gedehnt wird.

Diese Funktion ist im Bootstrap-Layout nützlich.

<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> Breite, sondern die sichtbare Breite und Höhe eines absolut positionierten Elements mit Positionierung (Positionierung paarweise festgelegt, z. B. oben/unten, links/rechts)

Wenn für das absolut positionierte Element keine Breite festgelegt ist, sondern oben Ist der Wert /unten, links/rechts eingestellt, wird das Element gestreckt. Wenn Sie beispielsweise left:0; right:0; festlegen, beträgt die Breite des Elements 100 % der Breite des ersten relativ positionierten übergeordneten Elements. Zu diesem Zeitpunkt können Sie auch die visuelle Breite des Elements ändern Marge. Ebenso können wir für absolut positionierte Elemente auch deren visuelle Höhe ändern.

<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. Rand mit Prozentwert

ist dasselbe wie Auffüllen. Bei Elementen, die sich normalerweise im Standarddokumentfluss befinden, ist der tatsächliche Wert des Elements gleich der Breite des übergeordneten Elements * Prozentsatz;

Wenn ein Element auf absolute Positionierung eingestellt ist, entspricht sein tatsächlicher Wert der Breite * Prozentsatz des ersten übergeordneten Elements, das relativ dazu positioniert ist

<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.Randüberlappung

Randüberlappung tritt normalerweise auf zwischen Geschwisterelementen und zwischen übergeordneten und untergeordneten Elementen. Wenn Sie nicht darauf achten, kann es zu geringfügigen Problemen kommen. Hier finden Sie eine Zusammenfassung der Situationen, in denen Randüberlappungen auftreten.

1>Zwischen Geschwisterelementen

Wenn zwei Elemente eine Randüberlappung haben, sind ihre tatsächlichen Werte:

1. Wenn zwei Randwerte Wenn beide positiv sind, sind die tatsächlicher Wert = der größere der beiden

2. Wenn die beiden Randwerte einer positiv und einer negativ sind, ist der tatsächliche Wert = die Summe der beiden Werte

3. Wenn beide Randwerte negativ sind, ist der tatsächliche Wert = der größere Absolutwert der beiden

Wann kommt es zu einer Randüberlappung?

Solange es sich bei zwei benachbarten Geschwisterelementen um Blockelemente im Standarddokumentfluss handelt, kommt es in vertikaler Richtung zu einer Randüberlappung.

2>Zwischen dem übergeordneten Element und dem ersten/letzten untergeordneten Element

1. Rand oben/unten festlegen

2. Set padding-top/bottom

3. Attribute wie overflow:hidden/auto festlegen, um den automatischen Wert von BFC zu implementieren

3.margin

Rand festlegen: 0 auto; für ein Blockelement mit fester Breite, um das Element horizontal zu zentrieren. Dies sollte häufig von vielen Menschen verwendet werden, aber nur wenige Menschen kennen möglicherweise die spezifische Rolle des automatischen Werts.

Einfach ausgedrückt: Wenn Elemente, die keinen festen Breiten- oder Höhenwert haben, automatisch gestreckt werden, kann Auto verwendet werden, um den verbleibenden Platz zuzuweisen, nachdem ein fester Wert festgelegt wurde.

Es fühlt sich etwas schwierig an, es auszusprechen. Es gibt beispielsweise ein Blockelement mit einer festen Breite. Wir möchten, dass es auf der rechten Seite angezeigt wird. aber es kann auch mit margin-left: auto; erreicht werden:

<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;
}

Randwert auf automatisch setzen. Zu den gültigen Szenarien gehören:

1. Gewöhnliche Blockelemente mit fester Breite, gültig, wenn sie in horizontaler Richtung eingestellt werden; >

Absolut positionierte Elemente, wenn links gepaart festgelegt ist. Wenn /rechts, oben/unten oder beide festgelegt sind, ist eine feste Breite oder feste Höhe gültig.
Wenn die Das übergeordnete Element ist display: flex;, der Randwert des untergeordneten Elements ist auto und gültig
Weitere Artikel zum Thema CSS-Attributmarge finden Sie auf der chinesischen PHP-Website!