Heim  >  Artikel  >  Web-Frontend  >  Was ist das Konzept der enthaltenen Blöcke in CSS? Richtlinien zum Einbinden von Blockkonzepten in CSS

Was ist das Konzept der enthaltenen Blöcke in CSS? Richtlinien zum Einbinden von Blockkonzepten in CSS

云罗郡主
云罗郡主nach vorne
2018-11-10 15:42:183134Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem Konzept, Blöcke in CSS einzuschließen. CSS enthält Richtlinien für Blockkonzepte, die einen gewissen Referenzwert haben. Ich hoffe, dass sie für Sie hilfreich sind.

Was ist das Konzept der enthaltenen Blöcke in CSS? Richtlinien zum Einbinden von Blockkonzepten in CSS

Root-Element

Standardmäßig ist das HTML-Element ein umschließender Block, und einige Browser legen den Textkörper als umschließenden Block fest.

Nicht-Root-Elemente werden in zwei Situationen unterteilt:

1. Für Nicht-Root-Elemente, die position:absolute nicht festlegen, wie position:relative, position:static

Der untere enthaltende Block wird auf den Rand des Inhaltsbereichs des nächstgelegenen Elements auf Blockebene gesetzt. Beachten Sie, dass es sich um den Rand des Inhaltsbereichs handelt, nicht um den Rand und die Füllkanten.

2. Elemente, die position:absolute absolute Positionierung verwenden

In diesem Fall wird der enthaltende Block auf die nächstgelegene Position gesetzt und ist kein statisches Vorgängerelement (das Vorgängerelement kann hier ein sein). Element auf Blockebene. Es kann auch ein Inline-Element sein

a. Wenn das Vorgängerelement ein Element auf Blockebene ist, wird der enthaltende Block als Füllkante des Elements auf Blockebene festgelegt;

b. Wenn das Vorgängerelement ein Inline-Element ist, wird es auf den Inhaltsrand dieses Inline-Elements gesetzt.

Positionierung:

ist relativ zur Anfangsposition des Elements im CSS-Dokumentfluss kann über das Z-Index-Attribut gesteuert werden

Relative Positionierung im Fluid-Layout:

Flusslayout ist das Standardlayout, natürlich von links nach rechts, von oben nach unten >Wenn das Element position:relative und die Koordinaten festgelegt sind, befindet sich das Element an seiner ursprünglichen Position.

Das obige ist die vollständige Einführung in das Konzept des Einschließens von Blöcken in CSS Um mehr über das

CSS3-Tutorial

zu erfahren, folgen Sie bitte der chinesischen PHP-Website

Das obige ist der detaillierte Inhalt vonWas ist das Konzept der enthaltenen Blöcke in CSS? Richtlinien zum Einbinden von Blockkonzepten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:lvyestudy.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen