1. Realisieren Sie das Dreieck
2. Erreichen Sie eine horizontale Zentrierung
4. Horizontal und vertikal zentrieren
10. CSS3 fügt Pseudoklassen hinzu
11. Neu zeichnen und neu anordnen
1. Realisieren Sie das Dreieck
Das Prinzip der Dreiecksrealisierung: Die Breite ist 0, die Höhe ist 0; (1) Es gibt eine horizontale und vertikale Seite (oben, unten, links und rechts) in Randrichtung: Länge durchgehend rot, dies ist die untere Linie Verwenden Sie die Randrichtung für die anderen Kanten: Länge durchgehend transparent. (2) Es gibt zwei horizontale und vertikale Seiteneinstellungen (oben, unten, links und rechts). Wenn sich die Hypotenuse auf der rechten Seite des Dreiecks befindet, stellen Sie die obere oder untere Linie und die schräge Linie rechts ein. Wenn sich die Hypotenuse auf der linken Seite des Dreiecks befindet, setzen Sie die obere oder untere Linie und die schräge Linie auf der linken Seite.
2. Erreichen Sie eine horizontale Zentrierung
(1) Inline-Elemente werden horizontal zentriert
Verwenden Sie text-align: center , um eine horizontale Zentrierung von Inline-Elementen innerhalb von Elementen auf Blockebene zu erreichen. Diese Methode ist für Inline-Elemente (Inline), Inline-Block (Inline-Block), Inline-Tabelle (Inline-Tabelle) und Inline-Flex-Elemente wirksam.
(2) Inline-Elemente auf Blockebene werden horizontal zentriert
Indem Sie den Rand links und rechts von Elementen auf Blockebene mit fester Breite auf Auto setzen, können Sie Elemente auf Blockebene horizontal zentrieren.
(3) Mehrstufige Blockelemente werden horizontal zentriert
Verwenden Inline-Block: wenn es zwei oder mehr Blockelemente in einer Reihe durch eine Blockelement-Anzeige Bereitstellen ( das Display ) als Block inline text-align = left Attribut und die übergeordneten Container zu zentrieren. , So dass eine Vielzahl von Ebenenelemente werden horizontal zentriert.
Anzeige verwenden: flex: Verwenden Sie ein flexibles Layout (flex ), um eine horizontale Zentrierung zu erzielen, wobei der Ausrichtungsinhalt verwendet wird, um die Ausrichtung der flexiblen Boxelemente in Richtung der Hauptachse (horizontale Achse) festzulegen. In diesem Beispiel stellen Sie die untergeordneten Elemente so ein, dass sie horizontal zentriert sind.
3. Vertikal zentrieren
(1) Einzeilige Inline-Elemente sind vertikal zentriert
Wenn Sie die Höhe (Höhe ) und Linienhöhe (Linienhöhe) des Inline-Elements gleich einstellen , wird das Element vertikal zentriert.
(2) Mehrzeilige Elemente sind vertikal zentriert
Tabellenlayout verwenden: Legen Sie den Anzeigetyp des übergeordneten Elements auf Tabelle fest. Der Anzeigetyp des untergeordneten Elements (Anzeige) ist Tabellenverkauf. Verwenden Sie die vertikale Ausrichtung: Mitte des Tabellenlayouts, um eine vertikale Zentrierung der untergeordneten Elemente zu erreichen
Flex-Layout verwenden: Verwenden Sie das Flex-Layout, um eine vertikale Zentrierung zu erzielen. Stellen Sie den Anzeigetyp (Anzeige) auf Flex ein. Unter diesen definiert die Spalte Flex-Richtung: die Richtung der Hauptachse als Hochformat. Da das Flex-Layout in CSS3 definiert ist, treten in älteren Browsern Kompatibilitätsprobleme auf.
Verwenden Sie 'Sprite-Element- Geisterelement ': Fügen Sie also ein Pseudoelement mit 100% Höhe in den übergeordneten Container ein, um den Text und das Pseudoelement vertikal auszurichten, um den Zweck der vertikalen Zentrierung zu erreichen.
(3) Elemente auf Blockebene sind vertikal zentriert
Elemente auf Blockebene mit fester Höhe: Die Position des übergeordneten Elements wird auf relativ und die Position des untergeordneten Elements auf absolut festgelegt. Abstand von der Oberseite durch das absolute Positionierungselement (Top) 50%, und stellen Sie die margin-obere Hälfte der Elementhöhe nach oben versetzt, kann die vertikal zentriert erreicht werden.
Elemente auf Blockebene mit unbekannter Höhe: Wenn Höhe und Breite des vertikal zentrierten Elements unbekannt sind, können wir die Transformationseigenschaft in CSS3 verwenden, um die Y-Achse um 50% zu versetzen und eine vertikale Zentrierung zu erzielen. Einige Browser weisen jedoch Kompatibilitätsprobleme auf.
4. Horizontal und vertikal zentrieren
Feste Breite und Höhe der Elemente horizontal und vertikal zentriert: Durch Verschieben der Hälfte der Gesamtbreite des Elements (einschließlich Polsterung usw.) werden die Elemente horizontal und vertikal zentriert.
Unbekannte Breiten- und Höhenelemente werden horizontal und vertikal zentriert: Mit der 2D-Transformation wird die Hälfte der Breite und Höhe in horizontaler und vertikaler Richtung in umgekehrter Richtung verschoben, sodass die Elemente horizontal und vertikal zentriert sind. transformieren: übersetzen (-50%, -50%);
Flex-Layout verwenden (Anzeige: Flex): Hier wird der Ausrichtungsinhalt verwendet, um die Ausrichtung des flexiblen Box-Elements in Richtung der Hauptachse (horizontale Achse) ( Mitte ) festzulegen oder abzurufen. Das Attribut "Elemente ausrichten" definiert die aktuellen Flex-Elemente im Flex-Container seitigen Wellenlinien (vertikale Achse) in der Ausrichtungsrichtung (Zentrum) .
Rasterlayout verwenden (Anzeige: Raster): schlechte Kompatibilität, nicht empfohlen
Horizontal und vertikal auf dem Bildschirm zentrieren: Es müssen sowohl die regulären Anmelde- als auch die Registrierungsseiten verwendet werden. Um eine bessere Kompatibilität zu gewährleisten, müssen Sie auch das Tabellenlayout verwenden.
5. Neu in CSS3
(1) Verformung transformieren
Übersetzung der Elemente ( Übersetzen ) , Rotation ( Rotate ) , Skalierung ( Maßstab ) , die Neigung ( Schrägstellung )
Die Transformation wirkt sich nicht auf das Layout anderer Elemente aus
(2) Übergang
Geben Sie an, wie von einem Status in einen anderen gewechselt werden soll
(3) Animation komplexe Animation
Kann komplexere Stiländerungen erzielen
Usage : definieren Schlüsselmuster Rahmen , die Animation auf das Element angewendet
6. Box-Modell
Von außen nach innen: Rand (Rand), Rand (Rand), Polsterung (Rand), Inhalt (Inhalt)
7. Schwimmer löschen
Hinzufügen einer Höhe zum übergeordneten Element eines schwebenden Elements : Wenn ein Element schweben möchte, muss sein übergeordnetes Element eine Höhe haben. Die Höhe der Box kann geschlossen werden, um zu schweben. Kann passieren direkt die Höhe des übergeordneten Elements zu setzen, durch , die praktische Anwendung aller Boxen wir sind unwahrscheinlich Höhe hinzufügen, nicht nur umständlich und kann nicht auf sich schnell ändernden Seiten anzupassen anderen, durch die Höhe des übergeordneten Container Inhalt Ablenkung (wie img Bild) wird diese Methode eher in der Praxis angewendet.
clear: both; Fügen Sie das letzte redundante Element zum letzten untergeordneten Element hinzu und setzen Sie es dann auf clear: both, damit Sie den Float löschen können. Hier zu betonen , dass die Elemente am Ende des Mutterelementes addieren , um ein Block-Element sein, oder können nicht , die Höhe des Mutterelementes halten .
Pseudoelemente clear float : kombinieren: nach Pseudoelementen und hasLayout. Kann perfekt mit den aktuellen Mainstream-Browsern kompatibel sein
Überlauf verwenden: für das übergeordnete Element ausgeblendet. Diese Lösung ermöglicht es dem übergeordneten Container, einen BFC (Formatkontext auf Blockebene) zu bilden, und der BFC kann Gleitkommazahlen enthalten, die normalerweise zur Lösung des Problems des Zusammenbruchs der Höhe des übergeordneten Elements verwendet werden.
br-Tag schwebt : Es gibt ein Attribut von br-Tag: clear. Dieses Attribut ist eine Waffe, mit der der Float gelöscht, das Attribut im br-Tag gelöscht und der Wert all zugewiesen werden kann. Sie können den Schwimmer löschen.
8. CSS-Selektor
1. Tag Selector div h1 p
2. ID-Selektor #id
3. Klassenauswahl.
4. Kinderwähler ul> li
5. Descendant Selector Div p
6. Platzhalterauswahl *
7. Attributauswahl div [height = 100px]
8. Pseudoklassenauswahl a: hover (Link, besucht, schweben, aktiv)
Vererbbare Stile: Schriftgröße, Schriftfamilie, Farbe
Nicht vererbbare Stile: Rand, Polsterung, Rand, Höhe, Breite
9. Stilpriorität
Prioritätsauswahl in der Nähe: Bei gleichem Gewicht hat die nächstgelegene Stildefinition Vorrang
Gleiches Gewicht: Inline-Stil (innerhalb des Etiketts)> eingebettetes Stylesheet (in der aktuellen Datei)> externer Stil (in der externen Datei)
\ 1. Die von! Important deklarierten Regeln werden verwendet.
\ 2. Die im style-Attribut des HTML-Elements eingebettete Deklaration.
\ 3. Die ID-Auswahlregel wird verwendet.
\ 4. Es werden Regeln für Klassenselektoren, Attributselektoren, Pseudoelemente und Pseudoklassenselektoren verwendet.
\ 5. Die Elementauswahlregeln werden verwendet.
\ 6. Regeln, die nur einen universellen Selektor enthalten.
10. CSS3 fügt Pseudoklassen hinzu
p : first-of-type wählt das erste Element aus, das zu seinem übergeordneten Element gehört
p: last-of-type wählt das letzte Element aus, das zu seinem übergeordneten Element gehört
p: only-of-type wählt nur Elemente aus, die zu seinem übergeordneten Element gehören
p: only-child wählt nur untergeordnete Elemente aus, die zu seinem übergeordneten Element gehören
p: n-tes Kind (2) wählt das zweite untergeordnete Element aus, das zu seinem übergeordneten Element gehört
: enabled: disabled Der deaktivierte Status des Formularsteuerelements.
: aktiviert Das Optionsfeld oder Kontrollkästchen ist aktiviert.
11. Neu zeichnen und neu anordnen
Die Methoden zum Reduzieren des Neuzeichnens und Neuanordnens sind:
· Fragen Sie das DOM nicht ab, wenn sich die Layoutinformationen ändern.
· Verwenden Sie csstext, className, um Attribute sofort zu ändern
· Fragment verwenden
· Für Elemente, die mehrfach neu angeordnet wurden, z. B. Animationen. Verwenden Sie die absolute Positionierung, um den Dokumentfluss so zu verlassen, dass andere Elemente nicht beeinträchtigt werden
