Grundlegender Wissensaustausch über Div- und CSS-Layout

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

Referenzobjekt: 1 Im übergeordneten Element 2 mit Positionierungsattribut und sucht nach dem nächstgelegenen übergeordneten Element

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-

-Element wird für das Referenzobjekt

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

10.4 Untergeordnetes Element Selektor ==>gt; > , Anwendungsszenario: Wählen Sie diejenigen aus, die die Bedingungen erfüllen. Untergeordnete Elemente können nur die Elemente der nächsten Ebene auswählen

Funktion: Sie alle dienen zur komfortablen Auswahl von Elementen

10.5 Attributselektor ==> Element [Attribut = Attributwert] Anwendungsszenario: Elemente mit bestimmten Attributen auswählen

Name

Name = Wert

name ^= val

name $= val

Kann als Filterbedingung verstanden werden

11. Pseudoklasse, Pseudoelement

1 p+css-Layout
Schlüsselwörter: Box-Position
Marge
Padding
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: 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

Referenzobjekt: 1 Im übergeordneten Element 2 mit Positionierungsattribut und sucht nach dem nächstgelegenen übergeordneten Element

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-

-Element wird für das Referenzobjekt

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

10.4 Untergeordnetes Element Selektor ==>gt; > , Anwendungsszenario: Wählen Sie diejenigen aus, die die Bedingungen erfüllen. Untergeordnete Elemente können nur die Elemente der nächsten Ebene auswählen

Funktion: Sie alle dienen zur komfortablen Auswahl von Elementen

10.5 Attributselektor ==> Element [Attribut = Attributwert] Anwendungsszenario: Elemente mit bestimmten Attributen auswählen

Name

Name = Wert

name ^= val

name $= val

Kann als Filterbedingung verstanden werden

Verwandte Empfehlungen:

Sechs Beispiele für dreispaltiges CSS Layout-Methoden

CSS-Verwendung Detaillierte Erläuterung der Position:Sticky-Implementierung von Sticky-Layout-Beispielen

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!