Heim > Artikel > Web-Frontend > 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 aninline-block: Geben Sie das Objekt als Inline-Blockelement annone: Blenden Sie das Objekt ausFloat-Steuerelemente ob das Element als schwebend angezeigt wirdfloat : none | rightnone: 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 sollDer 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 Elemente5. Schwebende Elemente können nur auf der linken oder rechten Seite schwebenclear clear floatklar: 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 erlaubtPosition Die Positionierungsmethode des ObjektsPosition: 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 mitabsolute Anweisungen: 1. Positionieren Sie durch oben, unten, unten. links, rechts3. 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 ab3. Positionieren Sie sich in Bezug auf die eigene statische Position durch oben, unten, links, rechtsBeispiel: 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 zuvorBeispiel: 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!