Vertiefte Kenntnisse von (Anzeige, Float, Position) in CSS

display wird verwendet, um den Anzeigemodus von Elementen festzulegen

display: inline-block | >

block: Geben Sie das Objekt als Blockelement an

inline-block: Geben Sie das Objekt als Inline-Blockelement an

none: Blenden Sie das Objekt aus

Float-Steuerelemente ob das Element als schwebend angezeigt wird

float : none | right

none: Stellen Sie das Objekt so ein, dass es nicht schwebt

links: Stellen Sie das Objekt so ein, dass es links schwebt

rechts: Legen Sie fest, dass das Objekt rechts schweben soll

Der Zweck des Schwebens:

besteht darin, die Standardanzeigeregeln des Dokumentenflusses zu durchbrechen. Wenn Sie möchten, dass die Elemente gemäß unseren Layoutanforderungen angezeigt werden. Zu diesem Zeitpunkt müssen Sie das Float-Attribut

1 verwenden. Jedes als Float deklarierte Element wird automatisch als „Block-Level-Element“ festgelegt

2 Fluss in Standardbrowsern, sodass das Element nach dem schwebenden Element die Position einnimmt, an der sich das schwebende Element befinden sollte

3 Wenn in der horizontalen Richtung nicht genügend Platz für das schwebende Element vorhanden ist, fahren Sie mit dem nächsten fort Zeile

4. Text Der Inhalt umgibt die schwebenden Elemente

5. Schwebende Elemente können nur auf der linken oder rechten Seite schweben

clear clear float

klar: keine |. rechts | beide

keine: Standardwert. Schwebende Objekte sind auf beiden Seiten erlaubt

links: Schwebende Objekte sind auf der linken Seite nicht erlaubt

rechts: Schwebende Objekte sind auf der rechten Seite nicht erlaubt

beide: Schwebende Objekte sind nicht erlaubt nicht erlaubt

Position Die Positionierungsmethode des Objekts

Position: statisch | relativ |. Ohne Positionierung folgen Objekte dem normalen Fluss. Zu diesem Zeitpunkt werden die vier Positionierungsversatzattribute nicht angewendet

relativ: Relative Positionierung, das Objekt folgt dem regulären Fluss und bezieht sich auf seine Position im regulären Fluss durch die vier Positionierungsversätze oben, rechts, unten und links Wenn das Verschiebungsattribut versetzt ist, wirkt es sich nicht auf Elemente im regulären Fluss aus.

absolut: Absolute Positionierung, das Objekt befindet sich zu diesem Zeitpunkt außerhalb des regulären Flusses Das Positionierungs-Vorfahrenelement, das sich selbst am nächsten liegt. Wenn es kein Positionierungs-Vorfahrenelement gibt, dann zurück zum Körperelement. Die versetzte Position der Box wirkt sich nicht auf Elemente im regulären Fluss aus, und ihr Rand wird nicht mit anderen Rändern reduziert.

fest: feste Positionierung, konsistent mit absolut, aber die versetzte Positionierung basiert auf dem Fenster . Wenn die Bildlaufleiste angezeigt wird, scrollt das Objekt nicht mit

absolute Anweisungen:

1. Positionieren Sie durch oben, unten, unten. links, rechts

3. Wenn die Position des übergeordneten Elements statisch ist, basiert die Position auf dem Ursprung der Körperkoordinaten

4. Wenn die Position des übergeordneten Elements relativ ist , die Position basiert auf dem übergeordneten Element

Beispiel: p { position: absolute left:100px;}

relative Beschreibung:

1. Relative Positionierung (relativ zur ursprünglichen Position)

2. Brechen Sie nicht vom Dokumentenfluss ab

3. Positionieren Sie sich in Bezug auf die eigene statische Position durch oben, unten, links, rechts

Beispiel: p { position: left:100px; top:100px;fixed Hinweis:

Feste Positionierung ist eigentlich nur eine spezielle Form der absoluten Positionierung -positionierte Elemente sind relativ zum Browserfenster fixiert, nicht relativ zu den darin enthaltenen Elementen, auch wenn die Seite nach dem Scrollen immer noch genau an der gleichen Stelle im Browserfenster ist wie zuvor

Beispiel: p { Position: fest; rechts: 0; unten: 0; Sie können die Stapelreihenfolge über das Z-Index-Attribut festlegen.

ist größer. Objekte mit Zahlenwerten werden über Objekten mit kleineren Zahlenwerten gelegt

Das oben genannte tiefgreifende Verständnis von CSS (Anzeige, Float, Position) wird vom Herausgeber geteilt. Ich habe Ihnen den gesamten Inhalt gegeben, ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie ihn unterstützen Chinesische PHP-Website.

Für ein tieferes Verständnis von CSS-Artikeln (Anzeige, Float, Position) beachten Sie bitte die chinesische PHP-Website!