Heim > Web-Frontend > CSS-Tutorial > Detaillierte grafische Erläuterung der CSS-Layoutmethode

Detaillierte grafische Erläuterung der CSS-Layoutmethode

高洛峰
Freigeben: 2017-03-27 10:50:34
Original
1943 Leute haben es durchsucht

Übersicht über die CSS-Layout-Methode

图文详解css布局方式

Die CSS-Layout-Methode ist in Teile unterteilt

Die CSS-Layout-Methode

  • Layout innerhalb der Box

    • Layout des Textes

    • Layout der Box selbst

  • Layout zwischen Boxen, visuelle Formatierung

    • BFC-Layout (Blockformatierungskontext) unter Layoutkontext

    • Layout im IFC-Layoutkontext

    • Layout im FFC-Layoutkontext

    • Layout im Tabellenlayoutkontext

    • Layout im CSS-Raster-Layout-Kontext

    • Absolutes Layout im Kontext

    • Layout im Float-Layout-Kontext,

    • Layout der Boxen außerhalb des normalen normalen Flusses

    • Layout der Boxen unter normalem Fluss

1. Das Layout im Inneren das Feld

  • Das Layout des Textes

    • Es gibt Zeilenfelder, die jede Textzeile umschließen. Dies ist unsichtbar

    • Zeilenfelder nehmen die höchste Zeilenhöhe des untergeordneten Elements ein

    • Sie können die Ebene einer einzelnen Textzeile über Zeilen- festlegen. Höhe zentriert

  • Box-Layout
    图文详解css布局方式

Bildquelle w3c

2. Box Das Layout zwischen

  • absolutes Layout (vom Dokumentenfluss losgelöst)

  • Float-Layout (vom Dokumentenfluss losgelöst)

  • normaler Fluss (Layout des normalen Dokumentenflusses) (Kontext)

    • Wenn eine der folgenden Bedingungen erfüllt ist, Es wird ein untergeordnetes Element erstellt. Der Kontext des neuen bfc

    • Wurzelelement (Körper)

    • Float-Element ist nicht none

    • Überlauf ist nicht sichtbar

    • Anzeige ist Inline-Block, Tabellenzelle, Tabellenüberschrift

    • Position's Wert ist absolut, fest

    • bfc (Blockformatierungskontext) Dokumentkontext auf Blockebene

    • ifc (Inline-Formatierungskontexte) Inline-Blockebene Kontext

    • ffc (Flex Formatting Contexts) Flex Formatting Context

    • table (Tabellenformatierungskontext) Tabellenlayout-Kontext

    • Raster (Rasterformatierungskontext) Rasterformatierungskontext

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der CSS-Layoutmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage