Vertiefendes Verständnis des Margin-Attributs in CSS

Umfassendes Verständnis des Margin-Attributs in CSS

Früher dachte ich, das Margin-Attribut sei ein sehr einfaches Attribut, aber kürzlich bin ich bei der Arbeit an einem Projekt auf einige Probleme gestoßen und habe festgestellt, dass das Das Margin-Attribut weist noch einige „Gruben“ auf. Im Folgenden werde ich das Grundwissen über Marge und diese „Gruben“ vorstellen. Dieser Blog-Beitrag ist hauptsächlich in die folgenden Teile unterteilt:

Margin – Grundwissen

Margin – auf der gleichen Ebene Element (nicht -Eltern-Kind-Anwenden

Marge zwischen Beziehung) – Anwenden ( Hervorhebung ) zwischen übergeordnetem Element und untergeordnetem Element

Margin – Mehrere Situationen, in denen die Einheit des Margenwerts % ist

Teil 1: Marge – Grundkenntnisse Zur Einführung in die Grundlagen Aufgrund des Randwissens können wir nicht umhin, über CSS-Box-Modell (Box-Modell) zu sprechen. Im Allgemeinen wird das CSS-Box-Modell für Design und Layout verwendet. Es handelt sich im Wesentlichen um eine Box, die Folgendes umfasst: Rand, Rand, Innenabstand und den mittleren Inhalt. Das Bild unten ist das Box-Modell (hier sprechen wir nur über das Standard-Box-Modell der W3C-Spezifikation, nicht über das nicht standardmäßige Box-Modell, das in IE5 und IE6 im seltsamen Modus verwendet wird):

Der Rand, den wir einführen werden, befindet sich auf der äußersten Ebene. Da der Rand transparent sein muss, kann er verwendet werden, um eine gewisse Lücke zwischen verschiedenen Feldern zu lassen, um ein schönes Layout und andere Effekte zu erzielen. Aus dem Kastenmodell oben können wir ersehen, dass rundherum Ränder vorhanden sind. Wir können diese mit margin-top, margin-right , margin-bottom bzw. margin-left festlegen . Margenwerte in vier Richtungen. (Hinweis: Da dieser Teil des Wissens relativ grundlegend ist, werde ich in diesem Teil nicht mehr vorstellen)

Teil 2: Rand – gleichzeitig Anwendung von zwischen Ebenenelementen (Nicht-Eltern-Kind-Beziehung) In diesem Teil wird hauptsächlich die Zusammenführung horizontaler und vertikaler Ränder vorgestellt.

(1) Horizontale Ränder verschmelzen Wenn zwei horizontale Kästchen aufeinander treffen, ist der endgültige Abstand zwischen ihnen der rechte Rand des linken Kästchens und das rechte Kästchen ergibt die Summe der Ränder .

Beispiel 1:

Der Code lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >水平方向的两个盒子 title >

style >

*{

margin:0;

padding:0;

border:0;

}

body{

font-size: 0;

}

.left{

width: 100px;

height: 100px;

background: red;

display: inline-block;

margin-right: 50px;

font-size: 20px;

}

.right{

width: 100px;

height: 100px;

background: yellow;

display: inline-block;

margin-left: 50px;

font-size: 20px;

}

style >

head >

body >

p class="left">宽为100px,右边距为50px p >

p class="right">宽为100px,左边距为50px p >

body >

html >

Der Effekt ist wie folgt:

Zu diesem Zeitpunkt beträgt der Abstand zwischen den beiden genau 100 Pixel.

Ergänzende Erklärung: Wie Sie sehen können, habe ich das display:inline-block-Attribut verwendet, um die beiden p (Blockelemente) aus dem normalen Dokumentenfluss zu machen, Darüber hinaus habe ich Setzen Sie auch den Körper. Setzen Sie die Schriftgröße auf 0, was das Problem des Inline-Blocks selbst lösen kann ( Wenn Ihnen die Beschreibung hier nicht klar ist, können Sie meinen Blog-Beitrag „Verstehen und Anwenden des Anzeigeattributs in CSS“ lesen ", dieser Artikel stellt Inline-Block-Probleme vor ), andernfalls sind die beiden p-Beispiele größer als 100 Pixel. Natürlich können Sie auch float verwenden, um zwei p in derselben Zeile erscheinen zu lassen.

(2) Die vertikalen Ränder verschmelzen Wenn sich zwei vertikale Kästchen treffen, ist der vertikale Abstand gleich dem oberen Kästchen. Je größer der untere Rand von der Box unten und dem oberen Rand der Box unten.

Beispiel 2:

>

1 2

3 4 5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >水平方向的两个盒子 title >

style >

*{

margin:0;

padding:0;

border:0;

width: 100px;

height: 100px;

margin-bottom: 100px;

background: red;

}

.bottom{

width: 100px;

height: 100px;

margin-top: 50px;

background: green;

}

style >

head >

body >

p class="top">高为100px,下边距为100px p >

p class="bottom">高为100px,上边距为50px p >

body >

html >

Der Effekt ist wie folgt:

Zu diesem Zeitpunkt können wir ihn mit bloßem Auge beobachten. Die vertikale Richtung der beiden Beispiele beträgt etwa 100 Pixel (eigentlich 100 Pixel). ) statt 100+50 =150px; Dies liegt genau daran, dass wenn zwei vertikale Boxen aufeinandertreffen, der vertikale Abstand dem größeren Wert aus dem unteren Rand der oberen Box und dem oberen Rand der unteren Box entspricht.

Ein weiteres interessantes Beispiel ist: Angenommen, es gibt ein Element mit gleichzeitig gesetztem Rand oben und Rand unten, aber das Wenn der Inhalt leer ist, werden auch die beiden Randwerte überlagert und der Wert ist der größte der beiden. Dies ähnelt der Überlagerung der Randwerte zweier Felder in vertikaler Richtung. Der Code lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >水平方向的两个盒子 title >

style >

*{

margin:0;

padding:0;

}

.top{

width: 500px;

height: 100px;

background: red;

}

.middle{

margin-top: 100px;

margin-bottom:50px;

}

.footer{

width: 500px;

height: 100px;

background: green;

}

style >

head >

body >

p class="top">上面的p,高100px p >

p class="middle"> p >

p class="footer">下面的p，高100px p >

body >

html >

Der endgültige Effekt ist wie folgt:

Wir haben festgestellt, dass das Beispiel zwischen dem p oben und dem p unten nicht 100 + 50 = 150 Pixel beträgt, sondern das größte von die beiden, das ist 100px.

Warum setzt W3C dann einen solchen Standard, anstatt denselben Standard wie die horizontale Richtung festzulegen? Das heißt, die Überlagerung von Randwerten, die tatsächlich Sinn macht. Beispielsweise müssen wir eine Seite entwerfen, die aus mehreren Absätzen besteht. Wir müssen margin-top und margin-bottom so festlegen, dass ein Abstand zwischen dem ersten Absatz und dem oberen Rand der Seite sowie ein Abstand zwischen dem letzten Absatz und dem unteren Rand besteht. Im Folgenden sind die Darstellungen ohne Überlagerung und Überlagerung aufgeführt:

Wir können sehen, dass sich die Seite links nicht überlappt, sodass das Beispiel zwischen den beiden Absätzen den doppelten Abstand aufweist Die obere Seite und die rechte Seite überlappen sich, alle Abstände sind gleich. Vielleicht ist das der Zweck, solche Standards festzulegen, wer weiß?

Teil 3: Rand – angewendet zwischen übergeordneten Elementen und untergeordneten Elementen ( Wichtige Punkte ) Zweiter Der Teil stellt die Verwendung von Rändern zwischen Geschwisterelementen vor, und in diesem Teil wird die interessanteste Anwendung von Rändern zwischen übergeordneten Elementen und untergeordneten Elementen vorgestellt. In diesem Teil diskutieren wir es auch unter zwei Gesichtspunkten. Einerseits legen die untergeordneten Elemente den Randwert in horizontaler Richtung fest, und andererseits legen die untergeordneten Elemente den Randwert in vertikaler Richtung fest.

(1) Legen Sie den horizontalen Randwert im untergeordneten Element fest. Wir können margin-left festlegen, um die Beziehung zwischen dem linken Rand des untergeordneten Elements und dem linken Rand des übergeordneten Elements zu steuern .

Beispiel 3:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >margin title >

style >

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-left为100px。 p >

p >

body >

html >

Ich habe den linken Rand des untergeordneten Elements auf 100 Pixel eingestellt. Der Effekt ist wie folgt:

Das heißt, der Abstand zwischen dem linken Rand des untergeordneten Elements und der linke Rand des übergeordneten Elements beträgt 100 Pixel. Es unterscheidet sich vom Festlegen des Abstands zwischen Elementen derselben Ebene, da der Abstand zwischen Elementen derselben Ebene den Abstand nicht berücksichtigt, aber er unterscheidet sich zwischen dem übergeordneten Element und dem untergeordneten Element, wenn ein Abstand vorhanden ist Der Effekt des übergeordneten Elements ist Welche Art? Bitte sehen Sie sich das folgende Beispiel an:

Beispiel 4:

Als nächstes fügen wir basierend auf dem obigen Beispiel einen Füllwert zum übergeordneten Element hinzu.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >margin title >

style >

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

padding:100px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-left为100px。 p >

p >

body >

html >

Der obige Code fügt dem übergeordneten Element einen Füllwert von 100 Pixel hinzu. Der Effekt ist wie folgt:

Wir können sehen, dass der Abstand über dem untergeordneten Element 100 Pixel beträgt. weil das untergeordnete Element Es muss sich im Inhaltsteil des übergeordneten Elements befinden, daran besteht kein Zweifel.

Aber nach der Messung kann festgestellt werden, dass der Abstand zwischen dem linken Rand des untergeordneten Elements und dem linken Rand des übergeordneten Elements 200 Pixel beträgt , da es auch einen linken Auffüllwert gibt Das vorherige Beispiel liegt daran, dass der Füllwert nicht festgelegt ist. Dies bedeutet, dass margin-left tatsächlich der Abstand zwischen dem linken Rand ist des untergeordneten Elements und der Innenseite der linken Polsterung des übergeordneten Elements.

Beispiel 5: Die Verwendung von margin-right ähnelt der Verwendung von margin-left. Ich werde hier nur ein Beispiel geben.

In diesem Beispiel wird der Wert für den rechten Rand im untergeordneten Element wie folgt festgelegt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >margin title >

style >

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

padding:100px;

background: red;

}

.son{

float: right;

width: 100px;

height: 100px;

background: green;

margin-right: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-right为100px。 p >

p >

body >

html >

Der Unterschied zwischen diesem Beispiel und Beispiel 4 besteht nur in der Position der untergeordneten Elemente. Der Effekt ist wie folgt:

Dieses Beispiel von kann veranschaulichen, dass der Wert von margin-right der Abstand zwischen dem rechten Rand des untergeordneten Elements ist und die Innenseite der rechten Polsterung des übergeordneten Elements. Es ist nur so, dass ich in den vorherigen Beispielen keine Polsterung verwendet habe, sodass ich es nicht beobachten konnte.

(2) Legen Sie den vertikalen Randwert im untergeordneten Element fest Gemäß der bisherigen Erfahrung, Theorie Apropos Davon können wir auch den Wert von margin-top so festlegen, dass zwischen dem oberen Rand des untergeordneten Elements und der Innenseite der oberen Polsterung des übergeordneten Elements ein bestimmter Abstand besteht. Dann lass es uns versuchen!

Beispiel 6:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >margin title >

style >

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-top: 100px;

}

style >

head >

body >

p class="father">

p class="son">高度为100px，margin-top为100px。 p >

p >

body >

html >

In diesem Beispiel habe ich den oberen Rand auf 100 Pixel eingestellt und der Effekt ist wie folgt:

Das ist nicht der Effekt, den wir wollen Ich möchte, dass die untergeordneten Elemente 100 Pixel vom oberen Teil des übergeordneten Elements entfernt sind. Wir sehen jedoch, dass der obere Teil des übergeordneten Elements 100 Pixel vom oberen Teil der Browserseite entfernt ist. Was ist schief gelaufen?

Tatsächlich liegt dies daran, dass ein Fehler auftritt, wenn das übergeordnete Element den Füllwert und den Randwert nicht festlegt - das übergeordnete Element Die Oberseite und die Oberseite des untergeordneten Elements überlappen sich vollständig und können nicht getrennt werden. Aus diesem Grund bewegen sich das oben erwähnte übergeordnete Element und das untergeordnete Element gleichzeitig nach unten.

Es gibt mehrere Lösungen für dieses Problem:

Methode 1: Fügen Sie padding hinzu -top Wert

Methode 2: Randwert zum übergeordneten Element hinzufügen

Methode 3: Fügen Sie das Attribut overflow:hidden; hinzu

Methode 4: Deklarieren Sie float

Methode 5: Deklarieren Sie das übergeordnete oder untergeordnete Element als absolut positioniert : position:absolute;

Methode 6: Hinzufügen Attribute zum übergeordneten Element overflow:auto; positon:relative; (Hinweis: Diese Methode wird später hinzugefügt, danke an Blogger @小elvesPawn für die Bereitstellung dieser Methode)

Methode 1: Fügen Sie basierend auf Beispiel 6 padding-top:1px in den CSS-Code des übergeordneten Elements ein. Der Effekt ist wie folgt:

Der einzige Nachteil der Methode besteht darin, dass sie den Fehler um 1 Pixel erhöht.

Methode 2: Fügen Sie basierend auf Beispiel 6 border-top:1px solid transparent im CSS-Code des übergeordneten Elements hinzu Der Effekt ist wie folgt:

erzielt auch den gleichen Effekt, aber die Nachteile sind die gleichen als Methode eins.

Methode 3: Fügen Sie basierend auf Beispiel 6 overflow: versteckt im CSS-Code des übergeordneten Elements hinzu. Der Effekt ist wie folgt :

erzielt den Effekt auch ohne Fehler. Es ist perfekt!!! Fügen Sie float:left; zum CSS-Code hinzu, um den Effekt zu erzielen.

Vorteile: Kein Pixelfehler. Nachteile: Float ist manchmal unnötig.

Methode 5: Fügen Sie das Attribut position:absolute; zum übergeordneten Element oder untergeordneten Element hinzu. Der gleiche Effekt wird erzielt.

Vorteile: Wie Methode vier. Und solange wir oben und links nicht verwenden, gibt es keine Auswirkungen, daher ist dies auch eine gute Methode.

(Erklärung: Blog-Freund @laden666666 wies darauf hin, dass die oben genannten Methoden drei, vier und fünf tatsächlich Methoden sind, um den Spielraum untergeordneter Elemente vom Eindringen in den übergeordneten Container abzuhalten. Sie können als BFC-Methode klassifiziert werden und sind im Wesentlichen gleich. Methode 6: Fügen Sie overflow:auto; zum übergeordneten Element hinzu, um den gleichen Effekt zu erzielen.

Diese Methode wurde persönlich getestet und ist effektiv. Sie wird vom Blogger @小elvesPawn bereitgestellt. Ich möchte meinen Dank aussprechen.

Teil 4: Mehrere Situationen, in denen die Einheit des Margin-Werts % ist Ich habe zuvor bei der Angabe der Werte Margin verwendet sind alle in px, daher gibt es kein Problem, dies zu verstehen. Aber was ist, wenn der Margenwert in % angegeben ist? Tatsächlich ist der Prozentsatz (%) zu diesem Zeitpunkt relativ zum übergeordneten Element (Container) des Elements, und dies gilt sowohl für Geschwisterelemente als auch für übergeordnete und untergeordnete Elemente. (

Nochmals vielen Dank an den Vorschlag von Blogger @小elvesPawn!! Dieser Teil des Inhalts wird auf der Grundlage dieses Vorschlags ergänzt.) Bei der Verwendung vertikaler Ränder in Elementen derselben Ebene treten jedoch unerwartete Ergebnisse auf. Hier ist ein Beispiel .

(1) Elemente derselben Ebene verwenden einen Abstand von % in horizontaler Richtung

Beispiel 7:

1

2

3 4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

head >

meta charset="UTF-8">

title >margin title >

style >

*{

margin:0;

padding:0;

}

.first{

float: left;

width: 200px;

height: 200px;

background: green;

}

.second{

float: left;

width: 200px;

height: 200px;

background: red;

margin-left: 20%;

}

style >

head >

body >

p class="first">宽为200，无margin p >

p class="second">宽为200,margin-left为20%; p >

body >

html >

In diesem Beispiel sind die beiden Elemente so eingestellt, dass sie nach links schweben, sodass der horizontale Rand der beiden Elemente leicht beobachtet werden kann. Unter diesen hat das linke p keinen Rand und der Rand links vom rechten p beträgt 20 %. Der Effekt ist wie folgt:

Aus der Darstellung , können Sie den Abstand zwischen den beiden p sehen. Es beträgt immer 20 % des übergeordneten Elements (das übergeordnete Element von p rechts hier ist body und seine Breite entspricht der Browserbreite).

(2) Elemente derselben Ebene verwenden einen Abstand von % in vertikaler Richtung Basierend auf der Inspiration aus Beispiel 7, wir können davon ausgehen, dass, wenn Sie den Rand in vertikaler Richtung verwenden und die Einheit des Werts % ist, der endgültige Abstand zwischen den beiden ein Prozentsatz des übergeordneten Elements (Körper im obigen Beispiel) ist. Ist das also wirklich so? Siehe das Beispiel unten.

Beispiel 8

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

head >

meta charset="UTF-8">

title >margin title >

style >

*{

margin:0;

padding:0;

}

.first{

width: 200px;

height: 200px;

background: green;

}

.second{

width: 200px;

height: 200px;

background: red;

margin-top: 10%;

}

style >

head >

body >

p class="first">高为200，无margin p >

p class="second">高为200,margin-top为20%; p >

body >

html >

Hier hat das obere p keinen Rand und der obere Rand des unteren p beträgt 10. Der Effekt ist wie folgt:

Wir haben festgestellt, dass, wenn ich die Höhe des Browsers verkleinere, im vertikale Richtung Der Abstand wurde nicht verringert! ! ! Und wenn ich die Breite des Browsers verkleinere, verringert sich der vertikale Abstand! ! !

Dies bedeutet: Der Abstand wird in vertikaler Richtung zwischen statistischen Elementen verwendet. Wenn die Werteinheit % ist, ist sie relativ zur Breite des übergeordneten Elements.

Warum ist es dann nicht die Höhe relativ zum Browser, die wir wollen? Ein Meister auf Zhihu hat es so erklärt (ursprüngliche Adresse: https://www.zhihu.com/question/20983035?rf=27109182):

(3) Übergeordnete und untergeordnete Elemente verwenden einen Rand mit einem Wert von % Für übergeordnete und untergeordnete Elemente untergeordnete Elemente, wenn die in untergeordneten Elementen verwendete Einheit %margin ist, dann ist der Randwert relativ zur Breite und Höhe des übergeordneten Elements (Hinweis: Dies ist tatsächlich relativ zur Höhe des übergeordneten Elements!).

Beispiel 9

Der Code lautet wie folgt:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

DOCTYPE html>

html lang="en">

head >

meta 🎜> charset="UTF-8">

title >Document title >

style >

.father{

width: 500px;

height: 300px;

background: red;

overflow: hidden;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-top: 20%;

margin-left: 20%;

}

style >

head >

body >

p class="father">

p class="son"> p >

p >

body >

html >

In diesem Beispiel habe ich den Wert für den linken Rand auf 20 %, den Wert für den oberen Rand auf 20 % festgelegt, die Breite des übergeordneten Elements beträgt 500 Pixel und die Höhe des Das übergeordnete Element ist 300 Pixel groß. Sehen wir uns den Effekt unten an.

Wie Sie auf dem Bild oben sehen können, ist der margin-top-Wert des untergeordneten Elements letztendlich relativ zur Breite des übergeordneten Elements und nicht zur Höhe .

Vertiefendes Verständnis des Margin-Attributs in CSS

In Verbindung stehende Artikel