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.
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 dasCSS3-Tutorial
zu erfahren, folgen Sie bitte der chinesischen PHP-WebsiteDas 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!