Sprechen Sie über das Verständnis des CSS-Attributrands

Sprechen Sie über das Verständnis des CSS-Attributrands
1. Was ist eine Marge?
Mit dem Rand wird die Abstände um Elemente herum gesteuert, wodurch der Zweck der Abstandsregelung visuell erreicht wird. Hat einen entsprechenden Rand relativ zum vorherigen Element. Wird zum Trennen von Elementen verwendet. Immer transparent.

2. Das Problem des Zusammenführens äußerer Ränder (siehe w3school) --- Prämisse: Das Element befindet sich im Dokumentfluss
2.1 Wenn zwei vertikale Ränder zusammentreffen, überlappen sich die Ränder in vertikaler Richtung und der endgültige Rand entspricht dem größeren der beiden Werte.
2.2 Wenn ein Element (ohne Ränder und Polsterung) ein anderes Element enthält, kommt es zu einer vertikalen Überlappung.
2.3 Wenn ein Element leer ist (ohne Ränder und), überlappen sich seine Ränder

3. Der Unterschied zwischen Rändern in Blockelementen und Inline-Elementen
Der Rand in Blockelementen betrifft die Ober-, Unter-, Links- und Rechtsseite von Blockelementen und kann beliebig gesteuert werden. In Inline-Elementen hingegen betrifft er nur die Elemente in horizontaler Richtung.
Hinweis: Bei austauschbaren Inline-Elementen wie „img“, „input“, „textarea“, „select“, „button“, „label“ usw. können Sie deren Breite und Höhe steuern und sie in „display: inline-block“ konvertieren. Daher kann der Rand auch nach oben, unten, links und rechts gesteuert werden.

4. Häufige Fehler im Zusammenhang mit Margen
4.1 IE6-Problem mit doppeltem Rand Beschreibung: Wenn das erste im übergeordneten Element enthaltene Element ein schwebendes Element ist, tritt das Problem mit dem doppelten Rand auf.
Lösung: display:inline
4.2 Problembeschreibung mit 3 Pixel Abstand zwischen schwebenden Elementen in iIE6: Ein schwebendes Element, das andere ist ein nicht schwebendes Element. Zwischen dem nicht schwebenden Element und dem schwebenden Element besteht ein Abstand von 3 Pixeln.

5. Der Unterschied zwischen Polsterung und Rand
Die Polsterung befindet sich innerhalb des Rahmens und hat die Hintergrundfarbe. Sie wird hauptsächlich verwendet, um Inhalt von Elementen zu trennen. Der Rand befindet sich außerhalb des Rahmens und hat keine Hintergrundfarbe. Er wird hauptsächlich verwendet, um Elemente voneinander zu unterscheiden und spielt eine isolierende Rolle.

6. Negatives Margenproblem der Marge (Fortsetzung folgt)
Die Verwendung negativer Ränder kann viele Probleme lösen.

Verweise
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/

<<:  Detaillierte Erläuterung der grundlegenden Betriebsbefehle für Linux-Netzwerkeinstellungen

>>:  Vue + Element dynamische Mehrfachheader und dynamische Slots

Artikel empfehlen

VMware-Konfiguration von Hadoop zur Realisierung eines pseudoverteilten Grafik-Tutorials

1. Experimentelle Umgebung Seriennummer Projekt S...

Optimierte Aufzeichnung der Verwendung von IN-Datenvolumen in Mysql

Die MySQL-Versionsnummer ist 5.7.28. Tabelle A ha...

CentOS 7.x Docker verwendet die Overlay2-Speichermethode

Bearbeiten Sie /etc/docker/daemon.json und fügen ...

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Im vorherigen Artikel wurde beschrieben, wie man ...

Detaillierte Analyse des MySQL-Datentyps DECIMAL

Vorwort: Wenn wir Dezimalzahlen speichern müssen ...

Detaillierte Erklärung der MySQL-Berechtigungssteuerung

Inhaltsverzeichnis MySQL-Berechtigungskontrolle B...

Lösung für Indexfehler in MySQL aufgrund unterschiedlicher Feldzeichensätze

Was ist ein Index? Warum einen Index erstellen? I...

Detaillierte Erläuterung des automatischen Formatierungszeilenumbruchs von Vue Save

Ich habe online nach vielen Möglichkeiten gesucht...

Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind

1. getElementById von IE8 unterstützt nur IDs, nic...

Implementierung eines laufenden Springboot-Projekts mit Docker

Einführung: Die Konfiguration von Docker, auf dem...

Erläuterung der Installation und Konfiguration zum Erstellen einer Go-Umgebung unter Linux

Es ist sehr einfach, eine Go-Umgebung unter Linux...

JavaScript implementiert Tab-Leisten-Umschalteffekte

Hier ist ein Fall, den Frontend-Entwickler kennen...

Installations- und Konfigurationsmethode des Vue-Route-Routing-Managements

einführen Vue Router ist der offizielle Routing-M...

Grundlegende Syntax und Funktionsweise der MySQL-Datenbank

Grundlegende Syntax der MySQL-Datenbank DDL-Opera...

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

Designer verfügen über eine eigene Schriftartenbi...