Grundkenntnisse des CSS-Webseitenlayouts (Zusammenfassung)

Dieses Kapitel vermittelt Ihnen die Grundkenntnisse (Zusammenfassung) des CSS-Webseitenlayouts, damit Sie einige Wissenspunkte zum CSS-Webseitenlayout verstehen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Die erste bis fünfte Ebene des Boxmodells:

Rahmen, Polsterung+Inhalt, Hintergrundbild, Hintergrundfarbe, Rand

2. Führen Sie die folgenden Vorgänge für die vom Floating betroffenen Etiketten aus:

1. Löschen: beides; 2. Löschen: rechts; Löschen: links; 100 % (oder feste Breite) + Überlauf: ausgeblendet;

3. Verwendungsszenarien von zwei klaren Floating-Methoden:

1. Wenn das untergeordnete Element auf Float eingestellt ist, ist dies beim übergeordneten Element nicht der Fall Dadurch kann die Höhe des übergeordneten Elements nicht automatisch erweitert und auf eine Linie verkleinert werden. Wenn das untergeordnete Element über das übergeordnete Element hinausgeht, ist es sinnvoll, die Breiteneinstellungsmethode zu verwenden: 100 % (oder fest). Breitenwert) + Überlauf: gleichzeitig ausgeblendet, um den Float zu löschen. Gleichzeitig wird der Floating-Effekt der unmittelbar angrenzenden Blockebene entfernt. Es ist nicht erforderlich, den Floating-Effekt des unmittelbar angrenzenden Blocks zu entfernen Ebenenelemente, die vom Floating-Effekt betroffen sind.

2. Wenn ein benachbartes Element auf Blockebene vom Floating betroffen ist, ist es angemessener, für die betroffene Blockebene „clear: Both“ oder „clear: left“, „clear: right“ festzulegen.

Hinweis: Wenn Sie die Breite auf 100 % festlegen, wird die Breite des übergeordneten Containers übernommen. Füllen Sie den gesamten Behälter links und rechts, um Bedingungen zu schaffen, unter denen Sie den Schwimmer freimachen können. Durch Hinzufügen des Überlaufversteckens kann der schwebende Teil des Pakets entfernt werden.

4. Absolute Positionierungsfunktionen:

1) Etablierte Positionierung mit Blockbitreferenz

2) Vollständig getrennt vom Standarddokumentfluss; ) Dann hat es das Offset-Attribut und das Z-Index-Attribut:

Wenn der Offset nicht festgelegt ist (links, oben):

Unabhängig davon, ob die Vorgängerelemente positioniert wurden oder nicht, halten Sie es aus dem Standarddokumentfluss an der ursprünglichen Position des Elements heraus

Beim Festlegen des Versatzes: der Maßstab für die Versatzreferenz:

Keine positionierten Vorgängerelemente: Verwenden Sie als Offset-Referenz; Es gibt positionierte Vorgängerelemente: Das nächstgelegene positionierte Vorgängerelement wird als Offset-Referenz verwendet.

Hinweis: Wenn ein Element auf absolute Positionierung eingestellt ist und keine Breite festgelegt ist, wird die Breite des Elements entsprechend dem Inhalt angepasst.

Übungsfrage: Es ist bekannt, dass sich ein Element b mit absoluter Positionierung in seinem übergeordneten Element a befindet. Wenn das a-Element ein statisches Element ist, wird das b-Element basierend auf (html) versetzt.

Antwort: Da a eine statische Position ist, muss sie basierend auf dem Stammelement, dem HTML-Element, versetzt werden (die statische Positionierung ist position: static, das Standardpositionierungsattribut des Elements. Nur absolute, relative, oder fest eingestellt werden) Berechnen Sie das positionierte übergeordnete Element:

Texteinzug festlegen: -999px; > Prinzip: Verwenden Sie zuerst die Anweisung text-indent:-999px; um dann die überlaufenden Elemente auszublenden, also die herausgedrückten Elemente auszublenden :

kann für @media- und @import-Regeln in CSS verwendet werden und kann auch in HTML und XML verwendet werden 1) @media-Bildschirm und (Breite: 800px).

2) @import url(example.css) screen and (width: 800px);

3)0

Das obige ist der detaillierte Inhalt vonGrundkenntnisse des CSS-Webseitenlayouts (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!