Vertiefendes Verständnis der Positions-, Float- und Anzeigeattribute in CSS sowie der Beziehung zwischen den dreien

In diesem Artikel geht es hauptsächlich um die Positions-, Float- und Anzeigeattribute in CSS sowie um die Beziehung zwischen den Positions-, Float- und Anzeigeattributen. Ich hoffe, er kann Ihnen helfen.

Positionsattribut:

Das Positionsattribut gibt die Positionierungsmethode eines Elements an. Es gibt 4 mögliche Werte: statisch, relativ, absolut oder fest:

statisch: Standardwert, Elemente werden in der Reihenfolge gerendert, in der sie im Dokumentfluss erscheinen
absolut: Absolute Positionierung, das Element ist relativ zu sein erstes positioniertes Vorgängerelement (nicht statisch)
fest: Das Element wird relativ zum Browserfenster positioniert
relativ: Das Element wird relativ zu seiner normalen Position positioniert, also bedeutet „links:20“ in Basierend auf dem Um die normale Position des Elements zu ändern, verschieben Sie es um 20 Pixel nach links.

Float-Attribut:

Das Float-Attribut definiert, in welche Richtung das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig davon, um welchen Elementtyp es sich handelt.
Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an; andernfalls werden sie so schmal wie möglich gemacht.
Hinweis: Wenn in einer Zeile nur sehr wenig Platz für ein schwebendes Element vorhanden ist, springt das Element zur nächsten Zeile und dieser Vorgang wird fortgesetzt, bis in einer bestimmten Zeile genügend Platz vorhanden ist.

keine: Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.
Links: Das Element schwebt nach links.
Rechts: Das Element schwebt nach rechts.

Anzeigeattribut:

Das Anzeigeattribut gibt das Boxmodell (Box) an, das von einem DOM-Element verwendet wird. d. h. die Art der Box, die das Element generieren soll.

Inline: Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt.
Keine: Dieses Element wird nicht angezeigt.
Block: Dieses Element wird als Element auf Blockebene angezeigt, mit Zeilenumbrüchen vor und nach diesem Element.
inline-block: Inline-Blockelement. Dieser Wert bewirkt, dass ein Element eine Blockbox generiert und als einzelne Inline-Box fließt, ähnlich einem ersetzten Element. Ein Element, dessen Anzeigewert inline-block ist, bildet intern ein Blockboxmodell und bildet selbst die Form eines inline-ersetzten Elements. Das heißt, ein Element, dessen Anzeigewert inline-block ist, kann Höhe und Breite wie ein Blockelement definieren und kann angeordnet werden In einer Zeile mit Inline-Elementen (z. B. Text) kann dieser Effekt an vielen Stellen beim Entwerfen der Seite hilfreich sein. Er kann wie ein Inline-Element zentriert oder wie folgt festgelegt werden: ein einzelnes Menü wie das Blockelement, und Sie können den Text auch ausblenden und das Hintergrundbild durch
list-item anzeigen: Dieses Element wird als Liste angezeigt.
table: Dieses Element wird angezeigt wird als Tabelle auf Blockebene angezeigt (ähnlich wie

CSS-Boxmodell (Boxmodell) Alles ist eine Box

div-, h1- oder p-Elemente werden oft als Block-Level-Elemente bezeichnet. Das bedeutet, dass diese Elemente als ein „Block-Box“ erscheinen werden als „Inline-Elemente“ bezeichnet, da ihr Inhalt in Zeilen angezeigt wird, d. h. als „Inline-Box“. Sie können den Typ der generierten Box ändern Zum Blockieren können Sie ein Inline-Element (z. B. das -Element) so gestalten, dass es sich wie ein Element auf Blockebene verhält. Sie können auch dafür sorgen, dass das generierte Element überhaupt keine Box hat. Das Feld und sein gesamter Inhalt werden nicht angezeigt und nehmen keinen Platz im Dokument ein. In einem Fall wird ein Element auf Blockebene erstellt, auch wenn es nicht explizit definiert ist. Dies geschieht, wenn am Anfang Text hinzugefügt wird ein Element auf Blockebene (z. B. ein div), auch wenn der Text nicht als Absatz definiert ist. Es wird auch als Absatz behandelt:

<div> 
some text 
<p>Some more text.</p> 
</div>

In diesem Fall wird das Feld als unbenanntes Blockfeld bezeichnet weil es nicht mit einem speziell definierten CSS-Attribut verknüpft ist: der Beziehung zwischen Anzeige, Position und Float

Wenn das Anzeigeattribut eines Elements auf „Keine“ gesetzt ist, wird das dem Element entsprechende Feld nicht generiert. In diesem Fall werden Float und Position ignoriert.
Andernfalls (Anzeige ist nicht „Keine“), wenn die Position Attribut eines Elements Wird auf „absolut“ oder „fest“ gesetzt (beides ist eine absolute Positionierung). In diesem Fall wird Float ignoriert (der berechnete Wert von Float ist keiner) und der Wert des Anzeigeattributs wird automatisch gemäß der folgenden Tabelle berechnet. Die Position der Box hängt von den Attributen oben, rechts, unten, links und dem Container der Box ab
Ansonsten (Anzeige ist nicht keine und Position ist nicht absolut oder fest), wenn der Wert von float nicht null ist ( ist links oder rechts), dann ist das Feld schwebend und der Anzeigewert wird gemäß der folgenden Tabelle berechnet
Andernfalls (Anzeige ist nicht keine, und die Position ist nicht absolut oder fest, Gleitkomma ist keine), wenn das Element Ist das Wurzelelement, wird der Anzeigewert gemäß der folgenden Tabelle berechnet. (In diesem Fall gibt es eine Ausnahme: Definiert in CSS2.1, wenn der angegebene Anzeigewert Listenelement ist, ist der Anzeigewert im Berechnungsergebnis Block oder Listenelement.)
Andernfalls (Anzeige ist nicht „Keine“) , Und die Position ist nicht absolut, fest, Float ist keine und ist nicht das Stammelement), dann wird sie entsprechend dem angegebenen Anzeigeattributwert angezeigt.

Konvertierung von Tabellenanzeigeattributen:

angegebener Wert inline-tabelle in Tabelle
angegebener Wert inline, Tabellenzeilengruppe, Tabellenspalte, Tabellenspalte -group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block In Block konvertieren
Jeder andere angegebene Wert bleibt unverändert.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Positions-, Float- und Anzeigeattribute in CSS sowie der Beziehung zwischen den dreien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!