Vertiefende Kenntnisse zur Verwendung von Margen in CSS

1.css margin kann die Größe des Containers ändern
Elementgröße
Sichtbare Größe – die Breite der Box im Standard- Boxmodell ist nicht enthalten Der Margin-Wert, vom ClientWidth
belegte Größe – einschließlich der Breite von margin outWidth ist nicht im Standard, es gibt eine entsprechende Methode in jquery

margin und visuelle Größe
1.1 Verwenden Sie das gewöhnliche horizontale Blockelement, das keine Breite/Höhe festlegt
2.2 Gilt nur für horizontale Abmessungen
　Hintergrundfarbe :#1a2b3c">
　　　

　　  Text


　　 　　
　　 Die Breite des Feldes ändert sich, wenn der Randwert geändert wird.

Anwendung: Adaptives Layout mit fester Breite auf einer Seite implementieren
 Gilt für horizontale Block-/Inline-Block-Elemente 　　　 Die Größe ist kleiner geworden.
Nutzen Sie diese Funktion Lassen Sie Platz über und unter dem Scroll-Container ="300"> 　　　

　　 Die innere Box öffnet sich und Im äußeren Feld wird die Bildlaufleiste angezeigt. In Nicht-Chrome-Browsern hat dies natürlich keinen Leerraumeffekt (oben wird nicht angezeigt).

Der richtige Ansatz ist

p>

Kapitel 2: CSS-Marge und Prozenteinheit – Margin-Prozenteinheit verstehen
Horizontaler Prozentsatz/vertikaler Prozentsatz
　　Gewöhnlicher Elementprozentsatz/Absoluter Elementprozentsatz


　　　Prozentmarge-Berechnungsregeln
　　　 img{margin:10%;with:600px;heigth:200px;}
Der prozentuale Spielraum gewöhnlicher Elemente wird relativ zur Breite des Containers berechnet! Der Spielraum hier: 10 %;---->
top:60px, left:60px; werden alle relativ zur Breite des Containers berechnet.

　　　Absolute PositionierungDer prozentuale Spielraum des Elements
　　　 img{margin:10%; position:absolute;}
Der prozentuale Spielraum des absoluten Elements ist relativ zum ersten Das Vorgängerelement des positionierten Elements hat eine berechnete (relative/absolute/feste) Breite. Gewöhnliche Elemente werden relativ zu ihrem übergeordneten Element berechnet.
　　　

　　　　

="margin: 10%;position:absolute;" />

   
　　　　　.box{background-color:olive;
overflow
:hidden;}
　　　　　 .box > ; p{margin:50%}　　　　　　　 me Down in in in ind ins in on in on on margins in this page >> .box{background-color:olive; overflow
:hidden;}
Überlauf wird hier eingestellt, um Randüberlappungen zu verhindern

Kapitel 3 Gemeinsame Merkmale von Randüberlappungen
1. Blockieren Sie horizontale Elemente (ausgenommen Float- und absolute Elemente)
2. Berücksichtigen Sie nicht den Schreibmodus (Die Textschreibrichtung ist von oben nach unten), tritt nur in vertikaler Richtung auf (Rand oben/Rand unten)

Randüberlappung 3 Situationen
1. Angrenzende Geschwisterelemente
p{line-height:2em;margin:1em 0;background:#f0f3f9;}
Erste Zeile

.father{background:#f0f3f9}
　　　

🎜> 　　

　　 Das Festlegen des Rands für das erste oder letzte untergeordnete Element entspricht dem Festlegen desselben Rands Wert für das übergeordnete Element. Das untergeordnete Element hat den gleichen Rand und das untergeordnete Element hat den gleichen Randwert wie das übergeordnete Element ;p class="father">
　　　

　　

　　　 Die Größe des Sohnes beträgt hier nur 1em, nicht 2em
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      　　 　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Sichern Sie die Größe Ihres Sohnes 　　 　　 　　 　　 　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　 Craft Up in in in in ining in on in on in ons in on in on in on undurchsichtige Elemente >> 1. Das Element hat keine Randeinstellung
2. das Element hat keinen Füllwert
3 . Es gibt kein Inline-Element
im Inneren 4. Keine Höhe oder
Mindesthöhe



🎜> 1.2 Das übergeordnete Element hat Keine Einstellung für border-top
1.3 Das übergeordnete Element hat keinen
padding-top
Wert 1.4 Es gibt keine Inline-Elementtrennung zwischen dem übergeordneten Element und dem ersten untergeordneten Element

　　Rand-unten überlappend
　　　　1.1 Übergeordnetes Element ohne Blockformatierung, Kontextelement
　　　　　1.2 Übergeordnetes Element ohne Rahmen-unten-Einstellung
　　　　1.3 Übergeordnetes Element ohne padding-bottom Wert
1.4 Es gibt keine Inline-Elementtrennung zwischen dem übergeordneten Element und dem letzten untergeordneten Element
1.5 Das übergeordnete Element hat keine Einschränkungen für Höhe, Mindesthöhe, Maximalhöhe
Margin-Top entfernen überlappen
. vater{background:#f0f3f9}
　　　

　　　　

son< /p>
　　　　

     1. Das übergeordnete Element ist ein Kontextelement ohne Blockformatierung.father:overflow:hidden;
     2. Das übergeordnete Element hat keine Einstellung für den oberen Rand
    .father:border:4px solid # ccc;
3. Das übergeordnete Element hat keinen Padding-Top-Wert
4. Es gibt keine Inline-Elementtrennung zwischen dem übergeordneten Element und dem ersten untergeordneten Element
　　< p class="father"> 
　　　　　

son

　　　　

　　　　　　　Int -Das Gleiche wie oben,
　　　　　

 
;/p>
　　　　　

　 Berechnung Regeln für Randüberlappung

　　 　　1. Nehmen Sie den größten Wert für positiv und positiv
　　　　.a{margin-bottom:50px;}
　　　　.b {margin-top:20px;}
　　　　

　　　　

.father{margin-top:20px;}

　　　 .son {margin-top:50px;}
　　　

　　　　

< ;/p>
　　　

　　　.a{margin-top:20px;margin-bottom:50px}

　　　

Die obigen Ergebnisse sind margin:50px;

2. Positive und negative Werte hinzufügen
.a{margin-bottom:50px;}
.b{margin-top:- 20px;}
　　　

　　　

　　 .father{margin- top:-20px;}

　　 .son{margin-top: 50px;

> {margin-top:-20px;margin-bottom:50px}
　　> Die obigen Ergebnisse sind alle 30px
3. Der negativste Wert
.a{margin-bottom:-50px;}
.b{margin-top:-20px;} 　　< p class="a">

　　

　　.father{margin-top:-20px;}
　　.son{margin-top:-50px;}
　　

　　　

　　

　　 .a{margin-top:-20px;margin-bottom:-50px}

　　

　　 Die obigen Ergebnisse sind alle -50px
Was bedeutet Randüberlappung?
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
1. Fortlaufende Absätze oder Listen, wenn es keine Randüberlappung gibt, beträgt der Abstand zwischen dem ersten und dem letzten Element bei anderen Geschwister-Tags 1:2 und das Layout wird unnatürlich sein.

2. Verschachtelt oder direkt Platzieren Sie alle leeren Elemente an einer beliebigen Stelle im Web. p hat keinen Einfluss auf das ursprüngliche Layout

3. Das fehlende p-Element hat keinen Einfluss auf das ursprüngliche Leselayout

Übung:
Marginüberlappung sinnvoll nutzen
.list{margin-top:15px;}
Bessere Implementierung von
.list{
margin- top: 15px;
　　　　　margin-bottom:15px;
Kapitel 4: Margin:auto in CSS verstehen
　　Der Mechanismus von margin:auto
　　Elemente werden manchmal automatisch gefüllt, auch wenn Breite oder Höhe nicht festgelegt sind
　　p{background:#f0f3f9}

Wenn Sie Breite oder Höhe festlegen, wird die Funktion zum automatischen Ausfüllen überschrieben

p{width:500px;background:#f0f3f9;🎜> Der Randwert beträgt zu diesem Zeitpunkt 0px

Breite oder Höhe, Die Funktion zum automatischen Ausfüllen wird außer Kraft gesetzt.

Die ursprüngliche Größe, die ausgefüllt werden soll, wird zwangsweise durch Breite/Höhe geändert, und „margin: auto“ wird so eingestellt, dass diese geänderte Größe gefüllt wird.
p{width:500px;malign-

right

:100px;margin-left:auto;}
Wenn eine Seite fest ist, ist eine Seite automatisch, und auto ist die Größe des verbleibenden Speicherplatzes. Wenn beide Seiten automatisch sind, wird der verbleibende Speicherplatz geteilt gleichermaßen

Warum das Bild img{width:200px;marign:0 auto} nicht zentriert ist

Da das Bild inline horizontal ist, nimmt es nicht den gesamten Container ein, selbst wenn keine Breite vorhanden ist.

Setze img{

display
:block;width:200px;marign:0 auto;}
Da das Bild zu diesem Zeitpunkt blockhorizontal ist, wird es auch dann die Breite einnehmen, wenn keine Breite vorhanden ist Der gesamte Container kann nicht in einer Zeile angezeigt werden.
Warum ist es offensichtlich, dass die Containerhöhe fest ist und die Elementhöhe margin: auto 0 nicht vertikal zentriert werden kann

.father{height:200px;background:#f0f3f9;}
.son{ height:100px; width:500px;margin:auto;}

Es ist horizontal zentriert, aber nicht vertikal.

Erklärung: Wenn .son die Höhe nicht auf 100 Pixel festlegt, wird die Höhe dann automatisch auf 200 Pixel eingestellt? ——NEIN Daher kann der Rand nicht automatisch gefüllt werden. Die Festlegung von Breite und Höhe ist erzwungen, sodass er nicht automatisch gefüllt wird.
Hinweis: Wenn das untergeordnete Element in horizontaler Richtung größer als das übergeordnete Element ist, wird das Berechnungsergebnis nicht zentriert, selbst wenn es ein negativer Wert ist.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ulous in in vertikaler Richtung margin:auto

　　　 .father{height: 200px; width:100%; wiriting-mode:vertical-lr;}

　　 .son{height:100px ;width:500px;margin:auto;}
　　 Absolut und Rand sind zentriert
　　 .father{height: 200px;position:relative;}
.son{position:absolute; top:0px right:0px unten :0px;left:0px}
.son hat keine Breite/Höhe und das absolute Element füllt automatisch den Container.

Wenn Breite und Höhe festgelegt sind
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px unten:0px;left:0px ;width:500px;height:100px;}
Früher war es gestreckt und gespreizt, aber jetzt ist es zurückgezogen.

margin:auto; den gestreckten Raum gleichmäßig verteilen, um eine horizontale und vertikale Zentrierung zu erreichen

.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px unten:0px;links:0px;width:500px;height:100px;margin:auto;}

Unterstützt IE8+ und höher!
Kapitel 5: CSS-Randpositionierung mit negativen Werten
1. Ausrichtung beider Enden mit negativem Rand (Rand ändert Elementgröße)
Beispiel
.box{
width:1200px; margin: auto ;background:orange;
.ul{overflow:hidden;}
.li{
width:380px;height:300px;
x;background:green; float: left;
}
}
Der letzte der implementierten Liste hinterlässt eine Lücke.
　　　Die Größe des Containers wird geändert, indem ein negativer Randwert verwendet wird, um den Container breiter zu machen. Kann dieses Problem perfekt lösen
width:386.66px;height:300px;
margin-right:20px;
background:green;
float:left;
float:left;
}
}
2. Margin ist negativ. Der gleich hohe Layout-Rand unter dem Wert ändert den vom Element eingenommenen Platz
　　Margin und oberer und unterer Rand
　　

　　
　　

　　.box{overflow:hidden;resize:vertical;}
　　.child- orange,
　　.child-green{margin-bottom :-600px;padding-bottom:600px;}
　　.child-orange{float:left;background:orange;}
　　.child-green{float :left;background:green;}

Durch Festlegen eines großen negativen Werts für den unteren Rand und einen großen Wert für den unteren Rand, um den fehlenden Raum zu füllen, wird ein Layout mit gleicher Höhe erreicht. Prinzip: Inhaltsblockelemente können im Padding angezeigt werden, solange

nicht gesetzt ist, background:
clip

, box-sizing:content

3. Zweispaltige Anpassung unter Negativ Randwerte Layout, Elemente belegen Platz und bewegen sich mit dem Rand

　　

　　　

Picture Float right

　　

　　

Kapitel 6: Analyse der ungültigen CSS-Marign-Situation
1. Der vertikale Rand von horizontalen Inline-Elementen ist ungültig
2 Voraussetzungen 1. Nicht-Ersatzelemente, z. B. Nicht-IMG-Elemente; 2. Normaler Schreibmodus
Beispiel

marign:0px

Die Einstellung von margin233px;
für span ist horizontal gültig, vertikal jedoch ungültig.
2.Randüberlappungen
3.display:table-cell
display:table-cell/display:tab-row und andere Deklarationsränder sind ungültig!

Ausnahme Ersatzelemente img, button

4. Position und Rand
Der Randwert der nicht positionierten Richtung des absolut positionierten Elements ist „ungültig“
Der Randwert des absolut positionierten Elements ist immer gültig, nicht nur wie bei normalen Elementen.
5. Der außerhalb der Reichweite liegende Rand schlägt fehl

Wenn sich vor dem BFC-Inhaltsblock ein schwebendes Element befindet, wird der Rand des nächsten Elements relativ zum äußeren p berechnet.

6. Randfehler durch Inlining
p[style="height:200px;background-color:#f0f3f9;"]>img[style="marign-top:30;"]
Es schlägt fehl, wenn margin-top groß genug ist.
Erklärung: Inline-Elemente müssen an der Grundlinie ausgerichtet sein. Das Hinzufügen eines x nach dem Bild zeigt, dass es, egal wie weit der Rand oben ist, nicht über die Außenseite des Containers hinausragt.

Kapitel 7 margin-start und margin-end
　　margin-start
　　img{
　　margin-left：100px;
　　-webkit-margin-start:100px ;
　　　 -moz-margin-start:100px;
　　 　　margin-sart:100px;
2. Wenn der horizontale Fluss von rechts nach links erfolgt, ist margin-start äquivalent zu margin-right;
:ltr(rtl)
3. Unter vertikalem Fluss (writring-mode:vertical-lr) entspricht margin-sart margin-top Andere marginbezogene Attribute unter Webkit margin-
before

img{-webkit-margin-before:100px;} Standardflussrichtung In diesem Fall entspricht es margin-top 　　　margin-after 　　　 img{-webkit- marign-after:100px;} Im Fall der Standardflussrichtung entspricht dies margin-bottom;
　　 margin-collapse Der äußere Rand überlappt
-webkit-margin-collapse: Collapse|discard|separate
Überlappung des Kontrollbereichs
Standardüberlappung einklappen
Verwerfen

Das obige ist der detaillierte Inhalt vonVertiefende Kenntnisse zur Verwendung von Margen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!