Einführung und Verwendungszusammenfassung der negativen Margenfunktion

Einführung und Verwendungszusammenfassung der negativen Margenfunktion
Bereits in den CSS2-Empfehlungen von 1998 verschwanden Tabellen sukzessive von der Bildfläche und wurden nach und nach in die Historie aufgenommen. Aus diesem Grund ist das CSS-Layout zum Synonym für elegante Codierung geworden.
Von allen CSS-Konzepten, die Designer verwendet haben, sind negative Ränder wahrscheinlich die am wenigsten besprochene Positionierungsmethode. Es ist wie ein Tabu, das jeder verwendet, aber niemand diskutiert.
1. Negative Marge „rehabilitieren“
 Wir alle verwenden Ränder in CSS, aber das Festlegen von Rändern auf negative Zahlen kann schwierig sein. Im Webdesign gehen die Meinungen zur Verwendung negativer Ränder stark auseinander: Manche sind begeistert, andere halten es für Teufelszeug.
Ein negativer Rand würde folgendermaßen festgelegt:

Code kopieren
Der Code lautet wie folgt:

#Inhalt {Margin-left:-100px;}

Negative Margen werden selten verwendet, aber Sie werden bald feststellen, dass sie viel bewirken können. Zu negativen Margen gibt es einige Hinweise:
A. Negative Ränder sind absolut Standard-CSS
Das ist kein Witz. W3C hat sogar darauf hingewiesen, dass negative Werte für Randattribute zulässig sind. Das ist, was Nuff sagte
B. Es ist absolut richtig, dass Negativmaring keine Hack-Methode ist. Sie können nicht denken, dass es eine Hack-Methode ist, nur weil Sie Negativmaring nicht verstehen oder weil es wie ein Hack aussieht. Es sei denn, Sie verwenden es, um einen Fehler zu beheben, den Sie an anderer Stelle gemacht haben.
C. Wenn Sie den Dokumentfluss nicht unterbrechen und kein Float verwenden, wird der Dokumentfluss der Seite durch das negative Randelement nicht unterbrochen. Wenn Sie also einen negativen Rand verwenden, um ein Element nach oben zu verschieben, werden alle folgenden Elemente ebenfalls nach oben verschoben.
D. Vollständig kompatibel. Alle modernen Browser unterstützen negative Ränder vollständig (IE6 unterstützt dies in den meisten Fällen auch).
E. Floating beeinflusst die Verwendung negativer Ränder. Negative Ränder sind keine CSS-Eigenschaft, die Sie täglich verwenden, daher sollten Sie bei der Anwendung vorsichtig sein.
F. Dreamweaver interpretiert keine negativen Ränder
Die Entwurfsansicht von DW interpretiert keine negativen Ränder. Die Frage ist jedoch, warum Sie Ihre Website in der Entwurfsansicht überprüfen möchten?
2. Verwenden Sie negative Ränder
 Negative Ränder sind bei richtiger Verwendung sehr leistungsfähige Eigenschaften. Hier sind zwei Szenarien, in denen negative Ränder Vorrang haben.
Negative Randeigenschaft bei statischen Elementen

Abonnieren


Statische Elemente sind Elemente, die nicht auf Float eingestellt sind. Die folgende Abbildung veranschaulicht die Auswirkung negativer Ränder auf statische Elemente. Wenn dem oberen Rand/linken Rand eines statischen Elements ein negativer Wert zugewiesen wird, wird das Element in die angegebene Richtung gezogen. Zum Beispiel:

Code kopieren
Der Code lautet wie folgt:

/* Verschiebe das Element um 10 Pixel nach oben*/
#mydiv1 {margin-top:-10px;}

Wenn Sie den unteren/rechten Rand jedoch auf eine negative Zahl setzen, wird das Element nicht wie erwartet nach unten/rechts verschoben, sondern die nachfolgenden Elemente werden hineingezogen und überdecken die ursprünglichen Elemente.

Code kopieren
Der Code lautet wie folgt:

/*
* Die nachfolgenden Elemente von #mydiv1 verschieben sich um 10 Pixel nach oben, #mydiv1 selbst verschoben sich nicht
*/
#mydiv1 {margin-bottom:-10px;}

Wenn das Breitenattribut nicht festgelegt ist, wird durch Festlegen eines negativen linken/rechten Rands das Element in die entsprechende Richtung gezogen und die Breite vergrößert. Zu diesem Zeitpunkt fungiert der Rand als Polsterung.
3. Negativer Rand bei schwebenden Elementen
Betrachten Sie die folgende Situation
HTML

Code kopieren
Der Code lautet wie folgt:

<div id="mydiv1">Erste</div>
<div id="mydiv2">Zweite</div>

Wenn Sie einem schwebenden Element einen negativen Rand in die entgegengesetzte Richtung geben, wird der Zeilenabstand auf Null gesetzt und der Inhalt überlappt sich. Dies ist eine sehr nützliche Möglichkeit, adaptive Layouts zu erstellen, bei denen eine Spalte 100 % Breite hat und die anderen Spalten eine feste Breite (z. B. 100 Pixel) haben.

Code kopieren
Der Code lautet wie folgt:

/* Negativer Rand in die entgegengesetzte Richtung des Floats angewendet */
#mydiv1 {float:left; margin-right:-100px;}

Wenn beide Elemente schweben, setzt das Element #mydiv1 den rechten Rand auf 20 Pixel. Auf diese Weise denkt #mydiv2, dass #mydiv1 20 Pixel kürzer als seine ursprüngliche Breite ist (was zu einer Überlappung führt). Interessant ist jedoch, dass der Inhalt von #mydiv1 nicht betroffen ist und seine ursprüngliche Breite behält.
Wenn der negative Rand der tatsächlichen Breite entspricht, wird das Element vollständig abgedeckt. Dies liegt daran, dass die Gesamtbreite des Elements der Summe aus Rand, Polsterung, Rahmen und Breite entspricht. Wenn also der negative Rand der Summe der verbleibenden drei entspricht, beträgt die tatsächliche Breite des Elements 0 Pixel.
4. Praktische Fähigkeiten
 Da wir wissen, dass die Verwendung negativer Ränder CSS2-kompatibler Code ist, können wir mit dieser Funktion einige interessante CSS-Techniken erstellen.
Erstellen Sie ein einzelnes <ul> mit 3 Spalten

Abonnieren


Wenn Ihre Liste mit Elementen zu lang ist, um sie vertikal anzuzeigen, warum versuchen Sie nicht, sie stattdessen in Spalten aufzuteilen? Mit negativen Rändern können Sie diesen Effekt erzielen, ohne Floats oder Tags hinzuzufügen. Wie unten gezeigt, ist es erstaunlich, wie eine so einfache Operation die Sammlung in drei Spalten aufteilen kann!
HTML

Code kopieren
Der Code lautet wie folgt:

<ul>
<li class="col1">Eier</li>
<li class="col1">Schinken</li>
<li class="col2 top">Brot</li>
<li class="col2">Butter</li>
<li class="col3 top">Mehl</li>
<li class="col3">Creme</li>
</ul>

CSS

Code kopieren
Der Code lautet wie folgt:

ul {Listenstil: keine;}
li {Zeilenhöhe:1,3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* der Clou */

Durch Festlegen von margin-top:-2.6em (doppelte Zeilenhöhe des <li>-Tags) in der obersten Klasse werden alle Elemente perfekt ausgerichtet. Anstatt die relative Position jedes <li> festzulegen, müssen Sie nur einen negativen Rand auf das erste Tag in jeder Spalte anwenden, damit es viel besser passt. Cool, oder?
Betonung durch Überlappung erzeugen

Abonnieren


Auch das absichtliche Überlappen von Elementen ist ein großartiges Design-Element, um die Illusion von Tiefe zu erzeugen und bestimmte Elemente hervorzuheben. Ein gutes Beispiel hierfür ist der Bewertungsbereich auf Phlashers.com, der die Overlay-Technik verwendet, um die Anzahl der Bewertungen hervorzuheben. Mit negativen Rändern, der Z-Index-Eigenschaft und ein wenig Kreativität können Sie dies auch tun.
Hervorragende 3D-Texteffekte

Abonnieren


So können Sie auf clevere Weise etwas Ähnliches wie die Safari-Schriftart erstellen: Erstellen Sie zwei identische, leicht geneigte Texte in zwei Farben und verwenden Sie dann negative Ränder, um einen Text über den anderen zu legen, sodass ein Unterschied von 1–2 Pixeln besteht. Jetzt haben Sie optionalen, roboterfreundlichen Text! Keine sperrigen, bandbreitenintensiven JPEGs und GIFs mehr.
Einfaches zweispaltiges Layout. Negative Ränder sind auch eine gute Möglichkeit, ein einfaches adaptives zweispaltiges Layout zu erstellen. Ein responsives Layout mit zwei Spalten ist ein Layout, das eine Inhaltsspalte mit einer 100 % flüssigen Breite und einer Seitenleiste mit fester Breite hat.
HTML

Code kopieren
Der Code lautet wie folgt:

<div id="content"> <p>Hauptinhalt hier</p> </div>
<div id="sidebar"> <p>Ich bin die Seitenleiste! </p> </div>

CSS

Code kopieren
Der Code lautet wie folgt:

#Inhalt {Breite: 100 %; Float: links; Rand rechts: -200px;}
#Seitenleiste {Breite: 200px; Float: links;}

Jetzt haben Sie ein einfaches zweispaltiges Layout, das sogar in IE6 einwandfrei funktioniert. Um zu verhindern, dass die #sidebar durch den Text in #content verdeckt wird, fügen Sie hinzu

Code kopieren
Der Code lautet wie folgt:

/* Textüberlappung verhindern */
#Inhalt p {Margin-Right:210px;}
/* Es sind 200px + 10px, 10px ist der Abstand*/

Bei richtiger Verwendung kann ein negativer Rand das Tabellen-Tag vollständig ersetzen, um eine flexible Dokumentstruktur zu bilden. Bei dieser Struktur handelt es sich um eine SEO-Technik zur Barrierefreiheit, mit der Sie Ihre Tags in nahezu jeder gewünschten Reihenfolge anordnen können.
Elementposition feinabstimmen <br />Dies ist die am häufigsten verwendete und einfachste Methode zur Ermittlung negativer Ränder. Wenn Sie ein zehntes Div zwischen neun Divs einfügen, werden diese manchmal aus irgendeinem Grund nicht ausgerichtet. Durch die Verwendung negativer Ränder können Sie nur das zehnte Element feinabstimmen, ohne die anderen neun Elemente ändern zu müssen.
5. Fehlerbehebungen <br />Probleme mit Text und Links Wenn schwebende Elemente negative Ränder verwenden, können in einigen älteren Browsern Probleme auftreten. Zu den Symptomen gehören:
Der Link ist nicht anklickbar;
Text lässt sich nur schwer auswählen;
Wenn der Fokus verloren geht, verschwindet jeder Link in der Registerkarte.
Lösung: Fügen Sie dem Element position:relative hinzu und es wird ordnungsgemäß funktionieren!
Bilder werden abgeschnitten Wenn Sie das Pech haben, IE6 im Büro zu verwenden, kann es vorkommen, dass der Inhalt überlappender und schwebender Elemente plötzlich abgeschnitten wird.
Lösung: Fügen Sie auf ähnliche Weise position:relative zum schwebenden Element hinzu und alles wird wieder normal.
6. Zusammenfassung
 Negative Ränder haben im modernen Webdesign ihren Platz gefunden, da mit ihrer Hilfe Elemente ohne zusätzliche Markierungen positioniert werden können. Da immer mehr Benutzer ihre Browser aktualisieren (einschließlich IE8), sieht die Zukunft dieser Technologie rosig aus und immer mehr Websites werden darauf vertrauen.
Wenn Sie besondere Erfahrungen mit negativen Margen haben, hinterlassen Sie mir bitte eine Nachricht.

1. Anwendung eines negativen Rands in Tab
2. Anwendung der Negativmarge- und Negativverdrängungstechnologie:
3. Verwenden Sie einen negativen Rand, um ein adaptives Links-Rechts-Layout zu erstellen: Für diese Art von Layouteffekt (ein festes Bild links und Inhalt rechts) kann ein negativer Rand das Float-Layout ersetzen, eine Links-Rechts-Layoutplanung durchführen und einen adaptiven Effekt erzielen, den Float nicht hat. Sie können versuchen, auf die Schaltflächen „Breiter“ und „Schmaler“ zu klicken, um ein Beispiel hierfür anzuzeigen. Möglicherweise ist Ihnen auch die dritte Schaltfläche „Keine Mindestbreite festlegen“ aufgefallen. Wofür ist diese? Sie können einen Standardbrowser verwenden, um das obige Beispiel anzuzeigen. Klicken Sie auf die Schaltfläche „Breite“, um die maximale Breite festzulegen, und klicken Sie dann auf die Schaltfläche „Keine Mindestbreite festlegen“. Sie werden feststellen, dass ein Fehler aufgetreten ist. Negative Ränder sind in der Tat einzigartig in Bezug auf Layouteffekte, weisen jedoch auch einen kleinen Fehler auf. Das heißt, wenn das letzte untergeordnete Element im Inneren mithilfe negativer Ränder nach oben verschoben wird, wird seine tatsächliche Höhe aufgrund der Aufwärtsbewegung des internen untergeordneten Elements ebenfalls kleiner, da das übergeordnete Element sein Randelement ist. Die Lösung besteht darin, eine Mindesthöhe festzulegen. Der Mindesthöhenwert ist die kleinere feste Elementhöhe (in diesem Fall die Höhe des festen Bildes links). Dadurch kann der Fehler, dass sich der negative Rand nach oben verschiebt und die Höhe des übergeordneten Elements beeinflusst, vollständig behoben werden.
4. Implementieren Sie das Bild und verwenden Sie einen negativen Rand, um das Blockelement vertikal zu zentrieren. Zusammenfassung: Negative Randwerte wirken sich nicht auf die tatsächliche Größe der Box aus. Wenn es sich um einen negativen oberen oder linken Wert handelt, wird die Box nach oben oder links verschoben. Wenn es sich um einen unteren oder rechten Wert handelt, wirkt sich dies nur auf die Referenzlinie aus, die von der Box darunter angezeigt wird.

<<:  Details der MySQL-Berechnungsfunktion

>>:  Linux-Befehlszeilenoperation Hochladen und Herunterladen von Dateien in der Baidu-Cloud

Artikel empfehlen

So fragen Sie JSON in der Datenbank in MySQL 5.6 und darunter ab

Beim Speichern von Daten in MySQL werden manchmal...

Tutorial zur Installation und Verwendung von virtualenv in Deepin

virtualenv ist ein Tool zum Erstellen isolierter ...

Docker schließt die Implementierung des FTP-Dienstaufbaus mit einer Befehlszeile ab

Einzeiliger Befehl docker run -d \ -v /share:/hom...

So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online

Vorwort: Die am häufigsten verwendete Architektur...

Tutorial zum Zurücksetzen des Root-Passworts von Mac MySQL

Haftungsausschluss: Mit dieser Methode zum Zurück...

JavaScript zum Erreichen eines einfachen Bildwechsels

In diesem Artikel wird der spezifische Code für J...

Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token

Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...

JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren

Hintergrund Heute habe ich CodePen durchsucht und...

So deaktivieren Sie die Überprüfung auf Fremdschlüsseleinschränkungen in untergeordneten MySQL-Tabellen

Vorbereiten: Definieren Sie eine Lehrertabelle un...

Methode der Douban-Website zum Vornehmen kleiner Änderungen am Website-Inhalt

<br />Das Lesen ist ein sehr wichtiger Teil ...

Ein kurzer Vortrag über die Variablenförderung in JavaScript

Inhaltsverzeichnis Vorwort 1. Welche Variablen we...

Detaillierte Erklärung der Schleifenverwendung in Javascript-Beispielen

Aus Langeweile habe ich ein paar einfache Übungen...

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Dieser Artikel stellt vor, wie Sie IP-Adressdaten...

Über das WeChat-Gleitproblem des UniApp-Editors

Das Uniapp-Applet wird ein ähnliches Dropdown-Pro...

So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um

Code kopieren Der Code lautet wie folgt: <!DOC...