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
Artikel empfehlen
Kann Docker das nächste „Linux“ werden?
Das Linux-Betriebssystem hat das Rechenzentrum in...
JavaScript zum Erzielen eines Mauszieheffekts
In diesem Artikel wird der spezifische JavaScript...
So installieren Sie MySQL 5.7 aus dem Quellcode in einer CentOS 7-Umgebung
Dieser Artikel beschreibt, wie MySQL 5.7 aus dem ...
Docker-Image kann nicht gelöscht werden. Fehler: Kein solches Image: xxxxxx-Lösung
Vorwort Das Docker-Image kann nicht gelöscht werd...
Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf
Inhaltsverzeichnis Vorwort: 1. Docker installiere...
Tutorial zur mobilen Entwicklung: Zusammenfassung der Pixelanzeigeprobleme
Vorwort Ich bin davon überzeugt, dass bei der Ent...
So installieren Sie Docker mithilfe von Skripten unter Linux Centos
Was ist die Hauptfunktion von Docker? Derzeit gib...
JavaScript implementiert die Kontrollkästchenauswahlfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
JavaScript implementiert den detaillierten Prozess der Stapelstruktur
Inhaltsverzeichnis 1. Die Stapelstruktur verstehe...
Fragen zum Vorstellungsgespräch zu JS 9 Promise
Inhaltsverzeichnis 1. Mehrere .catch 2. Mehrere ....
Vue3-Kompilierungsprozess - Quellcodeanalyse
Vorwort: Vue3 ist schon seit langem verfügbar. Vo...
Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning
Hintergrund: Position: Sticky wird auch Sticky-Po...
Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen
Überblick Ich verwende Docker seit über einem Jah...
Zusammenfassung von 4 Möglichkeiten zum Hinzufügen von Benutzern zu Gruppen in Linux
Vorwort Linux-Gruppen sind Organisationseinheiten...
XHTML-Erste-Schritte-Tutorial: XHTML-Tags
Einführung in XHTML-Tags <br />Vielleicht is...