CSS und div sind beides Sprachcodes, die untrennbar mit dem Seitenlayout verbunden sind. Dieser Artikel vermittelt Ihnen hauptsächlich die Grundkenntnisse über div und CSS-Layout und hofft, allen zu helfen.
1 p+css-Layout?
Schlüsselwörter: Boxposition
Rand
Auffüllung
Float
Position
Was haben Sie gelernt? Im Wesentlichen lernen Sie einfach, wie Sie die Box positionieren (p)
2 Box-Modell?
Breite: Breite
Höhe: Höhe
Rand: Rand
Rand: äußerer Rand
Auffüllung: innerer Rand
Funktion: die Position, an der Inhalte platziert werden
2.1 Rand
Regel: Randrandauffüllung: vier Seiten (oben, unten, links und rechts)
Rand-links
Rand-rechts
Rand-oben
Rand-unten
2.2 Einfache Punkte, die Sie bei der Marge beachten sollten:
Der Körper hat einen Standardrand: chrome 8px
Wenn die Ränder der oberen und unteren Boxen festgelegt sind, basiert der Abstand zwischen den beiden Boxen auf dem größeren Rand (Margin Collapse)
Zentrieren Sie die Box: Rand: 10 Pixel automatisch;
Innenrand mit 3 Abständen
Funktion: Wird verwendet, um die Platzierung des Inhalts innerhalb der Box anzupassen
Hinweis: Nach dem Festlegen der Abstände wird die äußere Box größer integriert ? Auswirkung: Beeinflusst das Layout der gesamten Webseite
Die Gesamtbreite der Box: 300(Breite) + Innenabstand links/rechts(10+10) + Rand links/rechts(5+5) = 330
4 Elemente auf Blockebene und Inline-Elemente
Elemente auf Blockebene: p h1 p li usw. Wenn sie nur eine Zeile belegen, können Breite und Höhe festgelegt werden
Inline-Elemente: span i a img usw. Bei der Anzeige in einer Zeile können Breite und Höhe im Allgemeinen nicht festgelegt werden
Inline-Elemente in Elemente auf Blockebene konvertieren: Nach der Konvertierung können Breite und Höhe unterstützt werden
Regeln: p+css-Layout , Rand, Polsterung, Gleitkomma und Position hängen alle mit der Position zusammen
5 float float
Normaler Fluss: Die natürlichen Sortierregeln von Elementen, wenn spezielle CSS-Regeln gelten Positionierung und Floating werden nicht verwendet
Float: Außerhalb des normalen Flusses können sich Elemente nach links und rechts bewegen
float:left
float:right
Funktion: Erstellen Sie das linke und rechte Layout des box
Durch Floating verursachte Probleme: Es kann sich auf das Layout nachfolgender Elemente auswirken
Lösung: Nach dem Floating muss Float nach dem Element gelöscht werden
Float: linkes und rechtes Layout
Rand : Passen Sie den Abstand zwischen den Feldern an
Padding
Position: Positionierungsfunktion mit fester Position – Sie können das Element an jeder Position platzieren
6 Relative Positionierung
Position: relativ
Referenzobjekt: Wer Entspricht diese Positionierung Ihrer eigenen Ausgangsposition vor der Positionierung? Positionierung wird nicht verwendet
7 Absolute Positionierung
position:absolute
mit Positionierungsattribut: links oben rechts unten
Die Reihenfolge zum Suchen der Referenz: Suchen Sie zuerst das übergeordnete Element. Wenn ein Positionsattribut (Position) vorhanden ist, wird das übergeordnete Element als Referenz für den Offset verwendet.
Wenn nicht gefunden, durchsuchen Sie die äußeren Ebenen nacheinander, bis ein Element mit einem Positionsattribut gefunden wird. Wenn keines vorhanden ist, verwenden Sie das letzte. Das äußere HTML-
8 festgelegt
Referenzobjekt: Browser-sichtbarer Bereich
10. Andere Selektoren
Selektor: Methode zur Auswahl von Elementen id ==> ==> Labelname
10.1 Angrenzender Selektor ==> gleiche Attribute (und viele Codes werden wiederholt und können extrahiert und veröffentlicht werden)
10.3 Nachkommenselektor ==> Platz, Anwendungsszenario: Nachkommenelemente auswählen, die die Bedingungen erfüllen
Funktion: Sie alle dienen zur komfortablen Auswahl von Elementen
10.5 Attributselektor ==> Element [Attribut = Attributwert] Anwendungsszenario: Elemente mit bestimmten Attributen auswählen
NameName = Wert
name ^= valname $= val
Kann als Filterbedingung verstanden werden
11. Pseudoklasse, Pseudoelement
1 p+css-Layout
Schlüsselwörter: Box-Position
Marge
Padding
Float
Position
Breite: Breite
Höhe: Höhe
Rand: Rand
Rand: äußerer Rand
Auffüllung: innerer Rand
Funktion: die Position, an der Inhalte platziert werden
Regel: Randrandauffüllung: vier Seiten (oben, unten, links und rechts)
Rand-links
Rand-rechts
Rand-oben
Rand-unten
2.2 Einfache Punkte, die Sie bei der Marge beachten sollten:
Der Körper hat einen Standardrand: chrome 8px
Wenn die Ränder der oberen und unteren Boxen festgelegt sind, basiert der Abstand zwischen den beiden Boxen auf dem größeren Rand (Margin Collapse)
Zentrieren Sie die Box: Rand: 10 Pixel automatisch;
Innenrand mit 3 Abständen
Funktion: Wird verwendet, um die Platzierung des Inhalts innerhalb der Box anzupassen
Hinweis: Nach dem Festlegen der Abstände wird die äußere Box größer integriert ? Auswirkung: Beeinflusst das Layout der gesamten Webseite
Die Gesamtbreite der Box: 300(Breite) + Innenabstand links/rechts(10+10) + Rand links/rechts(5+5) = 330
4 Elemente auf Blockebene und Inline-Elemente
Elemente auf Blockebene: p h1 p li usw. Wenn sie nur eine Zeile belegen, können Breite und Höhe festgelegt werden
Inline-Elemente: span i a img usw. Bei der Anzeige in einer Zeile können Breite und Höhe im Allgemeinen nicht festgelegt werden
Inline-Elemente in Elemente auf Blockebene konvertieren: Nach der Konvertierung können Breite und Höhe unterstützt werden
Regeln: p+css-Layout , Rand, Polsterung, Gleitkomma und Position hängen alle mit der Position zusammen
5 float float
Normaler Fluss: Die natürlichen Sortierregeln von Elementen, wenn spezielle CSS-Regeln gelten Positionierung und Floating werden nicht verwendet
Float: Außerhalb des normalen Flusses können sich Elemente nach links und rechts bewegen
float:left
float:right
Funktion: Erstellen Sie das linke und rechte Layout des box
Durch Floating verursachte Probleme: Es kann sich auf das Layout nachfolgender Elemente auswirken
Lösung: Nach dem Floating muss Float nach dem Element gelöscht werden
Float: linkes und rechtes Layout
Rand : Passen Sie den Abstand zwischen den Feldern an.
Padding
Position: Positionierung mit fester Positionsfunktion – das Element kann an jeder Position platziert werden.
6 Relative Positionierung
Position: relativ
Referenzobjekt: Wer Entspricht diese Positionierung Ihrer eigenen Ausgangsposition vor der Positionierung? Positionierung wird nicht verwendet
7 Absolute Positionierung
position:absolute
mit Positionierungsattribut: links oben rechts unten
Die Reihenfolge zum Suchen der Referenz: Suchen Sie zuerst das übergeordnete Element. Wenn ein Positionsattribut (Position) vorhanden ist, wird das übergeordnete Element als Referenz für den Offset verwendet.
Wenn nicht gefunden, durchsuchen Sie die äußeren Ebenen nacheinander, bis ein Element mit einem Positionsattribut gefunden wird. Wenn keines vorhanden ist, verwenden Sie das letzte. Das äußere HTML-
8 festgelegt
Referenzobjekt: Browser-sichtbarer Bereich
10. Andere Selektoren
Selektor: Methode zur Auswahl von Elementen id ==> ==> Labelname
10.1 Angrenzender Selektor ==> gleiche Attribute (und viele Codes werden wiederholt und können extrahiert und veröffentlicht werden)
10.3 Nachkommenselektor ==> Platz, Anwendungsszenario: Nachkommenelemente auswählen, die die Bedingungen erfüllen
Funktion: Sie alle dienen zur komfortablen Auswahl von Elementen
10.5 Attributselektor ==> Element [Attribut = Attributwert] Anwendungsszenario: Elemente mit bestimmten Attributen auswählen
NameName = Wert
name ^= valname $= val
Kann als Filterbedingung verstanden werden
Verwandte Empfehlungen:
Sechs Beispiele für dreispaltiges CSS Layout-Methoden
Mehrere Layout-Beispiele für CSS-Webseiten
Das obige ist der detaillierte Inhalt vonGrundlegender Wissensaustausch über Div- und CSS-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
