vor ist dasselbe). Wie folgt:
Es wird auch einen Textumbruch geben:
![]()
Wann Wenn ein Element auf Blockebene vor einem schwebenden Element definiert wird, wird das schwebende Element danach umbrochen. Wenn das schwebende Element zuerst definiert wird, wird es vom Dokumentfluss getrennt und hat keinen Einfluss auf die Elemente auf Blockebene des normalen Dokumentflusses.
3. Die Beziehung zwischen den internen Box-Floating-Elementen und den internen Elementen des externen Dokumentenflusses:
Floating-Elemente decken die externen Dokumentflusselemente ab, belegen jedoch keinen Platz.
![]()
Der grüne Block und das Bild sind die inneren Elemente des blauen Blocks -Level-Elemente werden wie normale Dokumente angezeigt, aber das Inline-Element img weicht immer noch dem schwebenden Element, selbst dem schwebenden Element des externen Dokumentflusses.
4. Prioritätsbeziehung zwischen absoluter Positionierung und Floating von Geschwisterelementen
![]()
Blauer Block Positionieren Sie das Element absolut für den gelben Innenblock und setzen Sie p vor den roten Block. Der rote Block ist ein Float-positioniertes Element und wird durch absolute abgedeckt.
5. Die Prioritätsbeziehung zwischen absoluten Positionierungs- und Dokumentenflusselementen und die Prioritätsbeziehung zwischen relativen Positionierungselementen
Absolute Positionierungsposition: absolut.
1, absolute Positionierung relativ zu einem übergeordneten Element durchführen, das nicht statisch ist. Wenn die Position des übergeordneten Elements nicht angegeben ist, führt absolute eine absolute Positionierung relativ zum gesamten HTML-Dokument durch.
2. Wenn topleftbottomright nicht festgelegt ist, stimmen seine oberen und linken Seiten mit der Position des ursprünglichen Dokumentflusses überein (d. h. es ist dasselbe, als ob die Position nicht festgelegt wäre), aber es wird so sein decken die überschüssigen internen Floating-Elemente des externen Dokumentenflusses ab.
Das Bild unten zeigt die Einstellungsposition des blauen Blocks: absolut;
![]()
(Hinweis: Der gelbe Block (enthält rote und grüne Unterelemente ) und Der blaue Block (der grüne Unterelemente enthält) ist ein Geschwisterelement)
Ändern Sie die Reihenfolge. Der blaue Block setzt zuerst p und Position auf absolut. Für den gelben Block ist keine Position festgelegt, was bedeutet, dass er standardmäßig statisch ist. Aufgrund der Trennung vom Dokumentenfluss werden absolute Elemente zuerst angezeigt.
![]()
![]()
Setzen Sie die Position des gelben Blocks auf relativ, und der gelbe Block deckt das Absolute ab positioniertes Element. Das heißt, wenn ein relativ positioniertes Element nach einem absolut positionierten Element positioniert wird, wird das relativ positionierte Element zuerst angezeigt.
Zusammenfassung:
1, normaler Dokumentenfluss, Priorität der externen Box Wird im inneren Feld des zuvor definierten Elements angezeigt (wird bei Überschreitung überschrieben). Elemente auf Blockebene und Inline-Elemente befinden sich nicht in derselben Zeile.
2. Bei internen und externen Dokumentenflüssen werden schwebende Elemente vom Dokumentenfluss getrennt und zuerst definierte Elemente werden entsprechend dem normalen Dokumentenfluss angezeigt (Platz für Block machen). Ebene, Inline ausquetschen), was sich nicht auf das Layout später definierter Elemente auswirkt, sich aber auf die Anzeige von Inline-Elementen im normalen Dokumentfluss auswirkt Elemente sind, sie werden nicht überschrieben) Unterhalb schwebender Elemente)
3. Absolut positionierte Elemente werden zuerst über schwebenden Elementen angezeigt.
4. Absolut positionierte Elemente, die keine spezifischen Werte festlegen, werden gemäß dem normalen Dokumentenfluss angeordnet, werden jedoch vom Dokumentenfluss getrennt und haben keinen Einfluss auf die später definierten Elemente.
5, wenn das Geschwisterelement auf position:relative; gesetzt ist, wenn es vor dem absolut positionierten Element definiert wird, wird das absolut positionierte Element zuerst über dem relativ positionierten Element angezeigt.
Wenn es nach einem absolut positionierten Element definiert wird, hat das relativ positionierte Element Vorrang vor dem absolut positionierten Element.
4. So zentrieren Sie die Ausrichtung
Horizontale Zentrierung:
1. Implementierung Zentrierung von Inline-Elementen. Methode: Hinzufügen: text-align:center;
2. Um eine horizontale Zentrierung von Blockebenenelementen im Stil des Blockelements außerhalb des Inline-Elements zu erreichen.
Methode 1: margin:0 auto;
Hinweis: Wenn das Blockebenenelement ein direktes untergeordnetes Element des Körpers ist und die Breite nicht Wenn die Höhe nicht festgelegt ist und kein Inhalt in p vorhanden ist, ist die Höhe standardmäßig auf 0 eingestellt. Stellen Sie daher sicher, dass Sie die Breite und Höhe der Elemente auf Blockebene gleichzeitig festlegen, um den Effekt zu sehen. Diese Methode kann auch verwendet werden, wenn ein anderes p innerhalb eines p zentriert werden soll, da der Rand zu diesem Zeitpunkt relativ zu seinem übergeordneten Element ist.
Methode 2: Verwenden Sie absolute Positionierung und negative Ränder.
Position:absolut;
links:50 % – – 50 % Breite relativ zum übergeordneten Element um die Hälfte seiner eigenen Breite verschieben
Vertikale Zentrierung
1. Vertikale Zentrierung von Inline-Elementen
Methode 1:Zentrieren Sie die Schriftart vertikal und stellen Sie die Zeilenhöhe auf die Höhe ein das übergeordnete Element.
Methode 2: Stellen Sie den Abstand so ein, dass er vertikal zentriert wird.
Methode 3: Legen Sie die Zeilenhöhe für das übergeordnete Element und die vertikale Ausrichtung: Mitte für das Inline-Element fest.
2. Vertikale Zentrierung von Elementen auf Blockebene.
Methode 1: Verwenden Sie absolute Positionierung und negative Ränder.
Methode 2: Fügen Sie display:flex;align-items:center; zum übergeordneten Element hinzu, um eine vertikale Zentrierung zu erreichen.
Horizontale und vertikale Zentrierung erreichen
Methode 1: Absolute Positionierung und negative Ränder verwenden
Methode 2: Verwenden Sie display: flex Fügen Sie display: flex; align-items:center hinzu, um eine vertikale Zentrierung zu erreichen, und justify-content:center;, um eine horizontale Zentrierung
im Stil des übergeordneten Elements zu erreichen.
Methode 3: Verwenden Sie auch display:flex.Setzen Sie display:flex im übergeordneten Element; set margin:auto im untergeordneten Element.
Methode 4: Verwenden Sie das CSS3-Attribut - Translate()-Transformationsfunktion Position: absolut; links: 50%; transformieren (-50%, -50%);
5. Informationen zur Stilvererbung
Boxmodellstile wie Breite und Höhe (Breite und Höhe) sind nicht vererbbar. , Rahmen (Rand), Rand (Rand), Polsterung (Padding) und Hintergrund usw.
vertikale Ausrichtung ist nicht vererbbar
vererbbare Attribute
Farbe
Cursor
Richtung
Schriftart
Buchstabenabstand
Zeilenhöhe
Liste- style
text-align
text-indent
text-shadow
text-transform
whitewhite-space
Wortbruch
Wortabstand
Wortumbruch
Schreibmodus
Weitere Informationen zur schnellen Verwendung von CSS für das Layout (1) – Layoutelemente Ausführliche verwandte Artikel finden Sie auf der chinesischen PHP-Website!
