Drei Arten des HTML+CSS-Layouts (natürliches Layout/fließendes Layout/positioniertes Layout)
|
1. Natürliches Layout <br />Das Layout ohne jegliche Änderung wird automatisch linksbündig ausgerichtet. 2. Fließendes Layout <br />Die oben erwähnte Situation von float:left. 3. Positionierungslayout <br />Relative und absolute Positionierung sind beide relativ zum übergeordneten Div-Tag. Relativ – Verwenden Sie die ursprüngliche Position des Elements als Referenzpunkt. Absolut – Verwenden Sie den Ursprung (obere linke Ecke) des übergeordneten Div-Tags als Referenzpunkt. Da die äußere Ebene eine relative Position hat, wird sie, wenn die innere Ebene absolut ist, an der oberen linken Ecke der äußeren Ebene als Verschiebungsreferenz ausgerichtet. Natürlich schreibt die äußere Ebene nur position:relative und schreibt die beiden Werte left und top, was bedeutet: Die Position, an der sich dieses Element ursprünglich befinden sollte, wird als Layout-Referenzursprung für die Ausrichtung links und oben verwendet. Es gibt eine weitere Situation, in der es nur eine absolute Position gibt; auf der äußeren Ebene gibt es keine relative Position. Welcher Punkt wird zu diesem Zeitpunkt als Referenz verwendet? Das Prinzip lautet derzeit: Wenn in einem übergeordneten Element ein relatives Element vorhanden ist, wird das übergeordnete Element als Referenzursprung verwendet. Wenn keine relative Position vorhanden ist, wird der Textkörper als Referenzursprung verwendet. Wenn es keine relative äußere Ebene der Position:absolut gibt, gibt es keinen Unterschied zwischen den beiden Layouts. Der letzte Fall ist natürlich: Die äußere Schicht hat die Position: absolut; die innere Schicht hat die Position: relativ. Was passiert dann? Gemäß dem ursprünglichen Prinzip bezieht sich absolut auf den Körper als Layoutursprung und relativ auf die Position, an der er sich als Layoutursprung befinden sollte. Zu diesem Zeitpunkt bezieht es sich tatsächlich auf die obere linke Ecke der äußeren Ebene als Layoutursprung. Der Rest hängt von der tatsächlichen Situation ab. |
>>: So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt
Artikel empfehlen
JavaScript zum Implementieren einer einfachen Uhr
In diesem Artikelbeispiel wird der spezifische Co...
So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat
Vorwort Ich habe zufällig entdeckt, dass die halb...
Detaillierte Erklärung des VUE-Reaktionsprinzips
Inhaltsverzeichnis 1. Grundlage des Responsive-Pr...
So legen Sie einen Alias für einen benutzerdefinierten Pfad in Vue fest
So konfigurieren Sie benutzerdefinierte Pfadalias...
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
Einführung in die Eigenschaften von B-Tree
B-Baum ist eine allgemeine Datenstruktur. Daneben...
CSS steuert den Abstand zwischen Wörtern durch die Eigenschaft „letter-spacing“
Eigenschaft „letter-spacing“ : Vergrößern oder ve...
Detaillierte Erklärung des CSS3-Rotationswürfelproblems
3D-Koordinatenkonzept Wenn sich ein Element dreht...
MySQL-Serie 15: Allgemeine MySQL-Konfiguration und Leistungsstresstest
1. Allgemeine MySQL-Konfiguration Alle folgenden ...
HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks
Hyperlinks sind die am häufigsten verwendeten HTM...
Eine kurze Analyse der MySQL PHP-Syntax
Schauen wir uns zunächst die grundlegende Syntax ...
Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. 404 Seite 1. Ursach...
Analyse der MySQL-Methode zur Implementierung des Fuzzy-String-Ersatzes basierend auf regulären Ausdrücken
In diesem Artikel wird anhand eines Beispiels bes...
Detaillierte Erklärung der JSONObject-Verwendung
JSONObject ist lediglich eine Datenstruktur, die ...