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
Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js
Inhaltsverzeichnis Vorwort Funktionale React-Komp...
Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux
Als ich mein primäres Betriebssystem von Windows ...
Besprechen Sie den Wert von Webstandards aus vier Aspekten mit einer Mindmap
Ich habe einige Werte grob aufgelistet, um die Di...
Methode für die Sicherheitseinstellungen des Tomcat-Servers
Tomcat ist ein HTTP-Server, der die offizielle Re...
Ein kurzer Vortrag über MySQL-Pivottabellen
Ich habe eine Produktteiletabelle wie diese: Teil...
Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität
Bei täglichen Betriebs- und Wartungsarbeiten werd...
Detaillierte Erläuterung der Vue + Axios-Anforderungsschnittstellenmethode und der Parameterübergabemethode
Inhaltsverzeichnis 1. Anfrage erhalten: 2. Anfrag...
In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben
Inhaltsverzeichnis Was ist ein Plugin Plugins sch...
Ideen zum Erstellen von Welleneffekten mit CSS
Zuvor habe ich mehrere Möglichkeiten vorgestellt,...
Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)
Dieser Hinweis ist ein Installationstutorial. Er ...
Tutorial zur Installation von MySQL 5.6 auf CentOS 6.5
1. Laden Sie das RPM-Paket für Linux herunter htt...
Detaillierte Erklärung zum Erstellen einer Datentabelle in MySQL und zum Herstellen von Primär- und Fremdschlüsselbeziehungen
Vorwort Beim Anlegen der Primär- und Fremdschlüss...
Eine kurze Analyse der Zählverfolgung einer Anfrage in nginx
Lassen Sie mich zunächst die Anwendungsmethode er...
CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)
Dieser Effekt tritt am häufigsten auf unserer Bro...