Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

1.

Die Div-CSS-Maushandform ist Cursor:Zeiger;

2.

Hinweis zum relativen und absoluten HTML-Layout: „absolute“ bedeutet, dass, wenn das Positionsattribut auf „absolute“ gesetzt ist, die Positionierung immer entsprechend dem Browserfenster erfolgt, was eigentlich falsch ist.

Wenn die Position von Sub1 auf absolut gesetzt ist, wer ist dann das Objekt für den Offset? Hier gibt es zwei Situationen:

(1) Wenn das übergeordnete Objekt (oder der Urgroßvater, sofern es ein übergeordnetes Objekt ist) von sub1 ebenfalls das Positionsattribut festlegt und der Wert des Positionsattributs absolut oder relativ ist, d. h. nicht der Standardwert ist, wird sub1 entsprechend diesem übergeordneten Objekt positioniert.

Beachten Sie, dass das Objekt zwar bestimmt wurde, es jedoch einige Details gibt, die Ihre Aufmerksamkeit erfordern, d. h. welchen Ankerpunkt des übergeordneten Objekts sollen wir für die Positionierung verwenden? Wenn das übergeordnete Element Eigenschaften wie Ränder, Rahmen, Polsterung usw. festlegt, ignoriert dieser Ankerpunkt die Polsterung und wird vom Anfang der Polsterung aus positioniert (also nur von der oberen linken Ecke der Polsterung aus). Dies unterscheidet sich von der Annahme, dass die Positionierung am oberen linken Ende des Rands beginnt.
Die nächste Frage lautet: Wo befindet sich Sub2? Denn wenn die Position auf absolut gesetzt ist, läuft sub1 über den normalen Dokumentfluss hinaus, so als ob es nicht zum übergeordneten Element gehört, sondern nach oben schwebt. In DreamWeaver wird es als „Ebene“ bezeichnet, was eigentlich dasselbe bedeutet. An diesem Punkt erhält sub2 die Position von sub1 und sein Dokumentenfluss basiert nicht mehr auf sub1, sondern beginnt direkt beim übergeordneten Element.

(2) Wenn sub1 kein übergeordnetes Objekt mit einem Positionsattribut besitzt, wird der Body als Positionierungsobjekt verwendet und die Positionierung erfolgt entsprechend dem Browserfenster. Dies ist relativ einfach zu verstehen.

3.

CSS-Transparenzfilter:alpha(opacity=0);opacity:0;-moz-opacity:0; Nur wenn diese drei CSS zusammengefügt werden, ist es mit allen Browsern kompatibel

4. Fensterbeziehungen und Rahmen

Das oberste Objekt zeigt immer auf den höchsten (äußersten) Rahmen, also das Browserfenster. Verwenden Sie dies, um ordnungsgemäß auf jeden Frame zuzugreifen. Denn bei Code, der in einem Framework geschrieben wurde, verweist das Fensterobjekt immer auf eine bestimmte Instanz dieses Frameworks und nicht auf das Framework der obersten Ebene. Beispielsweise verweist window in einem untergeordneten Frame auf sein eigenes Objekt. Wenn Sie die Quelle dieses Frames und die Quelle des Iframes oder Frames des übergeordneten Fensters ändern möchten, können Sie window nicht verwenden. In diesem Fall müssen Sie window.top.$(selector) verwenden, um darauf zuzugreifen.

<<: CSS3 realisiert den Animationseffekt der Lotusblüte

>>: HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

GZIP-Komprimierung Tomcat und Prozessdiagramm zur Verbesserung der Web-Leistung

Detaillierte Erklärung zu Drag-Time und Drag-Case in JavaScript

So verwenden Sie den Linux-Befehl seq

Detaillierte Erklärung der MySQL-Gruppierung durch Optimierung

So aktivieren Sie TLS- und CA-Authentifizierung in Docker

Erfahren Sie mehr über den Hyperlink A-Tag

MySQL-Lerndatenbank-Suchanweisung DQL Xiaobai Kapitel

Detaillierte Erklärung der Mixins in Vue.js

Artikel empfehlen

So legen Sie eine feste IP-Adresse in einer virtuellen CentOS7-Maschine fest

Mehrere Möglichkeiten zur vertikalen und horizontalen Zentrierung in CSS3 mit unbestimmter Höhe und Breite

Beispiel für die Konvertierung eines eindimensionalen JS-Arrays in ein dreidimensionales Array

Implementierung eines Crawler-Scrapy-Image, das von Dockerfile basierend auf Alpine erstellt wurde

So installieren Sie Django in einer virtuellen Umgebung unter Ubuntu

Schnelle Deinstallation und Installation der Knotenumgebung eines Linux-Servers (einfacher Einstieg)

Beispiel für eine Formatierungsmethode für Datum und Uhrzeit in js

So fügen Sie in Linux stapelweise Dateipräfixe hinzu

Einführung mehrerer benutzerdefinierter Schriftarten in CSS3

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen

Canonical ermöglicht Linux-Desktop-Apps mit Flutter (empfohlen)

CSS3 implementiert den Beispielcode der NES-Spielekonsole

Zusammenfassung gängiger Docker-Befehle

Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.7