Einführung in die Definition und Verwendung von CSS-Floating und -Positionierung

---

1. Floating-Elemente

1. Bei Floating-Elementen sind einige Punkte zu beachten:

Zunächst einmal wird sein Die Methode entfernt schwebende Elemente aus dem normalen Fluss des Dokuments, wirkt sich jedoch weiterhin auf das Layout aus

2. Durch die Übernahme der einzigartigen Methode von CSS befinden sich schwebende Elemente fast „in einer eigenen Gruppe“, aber sie wirkt sich immer noch auf den Rest des Dokuments aus;
3. Wenn ein Element schwebt, wird es von anderen Elementen „umgeben“. Ränder um schwebende Elemente werden nicht zusammengeführt.
4. Nicht schwebend: float:none wird verwendet, um zu verhindern, dass Elemente schweben.

2. Die detaillierte Insider-Geschichte des Floatings

Bevor wir den Inhalt des Floatings im Detail verstehen, müssen wir zunächst wissen, was ein umschließender Block ist.

Der enthaltende Block eines Floating-Elements ist sein nächster Vorgänger auf Blockebene.

CSS bietet eine Reihe von Regeln zur Steuerung der Platzierung schwebender Elemente:

Die linke (oder rechte) Außengrenze eines schwebenden Elements darf den linken (oder rechten) Rand nicht überschreiten
Die linke (oder rechte) äußere Grenze des schwebenden Elements muss die rechte (oder linke) äußere Grenze des linken schwebenden (oder rechten schwebenden) Elements sein ) Element, das zuvor im Quelldokument erschien, es sei denn, der obere Rand des später schwebenden Elements liegt unter dem unteren Rand des ersten schwebenden Elements.
Der äußere rechte Rand eines links schwebenden Elements befindet sich nicht rechts vom äußeren Rand eines rechts schwebenden Elements rechts davon.
Die Oberseite eines schwebenden Elements darf nicht höher sein als die innere Oberseite seines übergeordneten Elements.
Die Oberseite eines schwebenden Elements darf nicht höher sein höher als alle vorherigen Floats Die Oberseite eines Elements oder Elements auf Blockebene ist höher.
Wenn ein schwebendes Element vor einem anderen Element im Quelldokument steht, darf die Oberkante des schwebenden Elements nicht höher sein als die Oberkante eines Zeilenfelds, das das vom Element generierte Feld enthält
Links (rechts) vom linken (oder rechten) schwebenden Element befindet sich ein weiteres schwebendes Element, und die rechte Außengrenze des ersteren darf nicht rechts (links) vom rechten ( links) Grenze seines enthaltenden Blocks
Floating-Elemente müssen so hoch wie möglich platziert werden
Links-Float-Elemente müssen so weit wie möglich platziert werden möglichst links und rechtsschwebende Elemente müssen möglichst weit rechts platziert werden.
3. Praktisches Verhalten

Schauen wir uns zunächst an, was passiert, wenn ein schwebendes Element höher als sein übergeordnetes Element ist.

CSS2.1 hat einen Aspekt des Verhaltens von Float-Elementen klargestellt: Float-Elemente werden so gedehnt, dass sie alle ihre Nachkommen-Float-Elemente einschließen.

Wenn Sie also das übergeordnete Element als Float-Element festlegen, können Sie das Float-Element in sein übergeordnetes Element einschließen.
4. Negative Ränder

Negative Ränder können dazu führen, dass sich schwebende Elemente außerhalb ihrer übergeordneten Elemente bewegen. Durch das Festlegen negativer Ränder kann ein Element breiter als sein übergeordnetes Element erscheinen, genauso wie ein schwebendes Element breiter als sein übergeordnetes Element erscheinen kann.

Es scheint, dass diese Regel der vorherigen zu widersprechen scheint (das schwebende Element wird außerhalb seines übergeordneten Elements platziert).

Aber wenn Sie die Regeln im vorherigen Abschnitt sorgfältig studieren, können Sie feststellen, dass dies tatsächlich technisch zulässig ist , müssen die äußeren Grenzen eines schwebenden Elements innerhalb des übergeordneten Elements liegen, aber da die Ränder negativ sind, wird der Inhalt des schwebenden Elements so platziert, als würde er seine eigenen äußeren Grenzen abdecken.

5. Schwebende Elemente, Inhalt und Überlappung

Es gibt auch eine interessante Frage: Was passiert, wenn ein schwebendes Element den Inhalt im normalen Fluss überlappt?

css2.1 legt die folgenden Regeln fest:

Wenn eine Inline-Box ein schwebendes Element überlappt, werden ihr Rand, Hintergrund und Inhalt alle „über“ dem schwebenden Element angezeigt .
Wenn eine Blockbox ein schwebendes Element überlappt, werden ihr Rand und Hintergrund „unter“ dem schwebenden Element angezeigt, während der Inhalt „über“ dem schwebenden Element angezeigt wird.
6. Klar

Manchmal möchten wir möglicherweise nicht immer, dass Inhalte durch schwebende Elemente fließen. In einigen Fällen möchten wir dieses Verhalten möglicherweise gezielt vermeiden. Beispiel:

Um sicherzustellen, dass nicht alle h3-Elemente rechts vom linken schwebenden Element platziert werden, können Sie h3{clear:left;} festlegen. Dies kann als „Stellen Sie sicher, dass sich auf der linken Seite eines h3 kein schwebendes Bild befindet“ verstanden werden;

2. Positionierung

1. Sie können die relativen Elemente des Rahmens genau definieren, wo er relativ zu seiner normalen Position erscheinen soll, oder die Position des Browserfensters selbst relativ zu einem übergeordneten Element oder einem anderen Element festlegen.

2. Positionierungstyp

statisch (Anfangswert):

Die Elementbox wird normal generiert und das Element auf Blockebene generiert als Teil eine rechteckige Box des Dokumentflusses erstellt ein Inline-Element ein oder mehrere Zeilenfelder und platziert sie in seinem übergeordneten Element.

• 
  relativ:

  Die Elementbox ist um einen bestimmten Abstand versetzt. Das Element behält seine unpositionierte Form und den Platz, den es ursprünglich einnahm.

• absolut: Die
  -Elementbox wird vollständig aus dem Dokumentfluss entfernt und relativ zu ihrem enthaltenden Block positioniert, der ein anderes Element im Dokument oder der ursprüngliche enthaltende Block sein kann. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Nach der Positionierung des Elements wird eine Box auf Blockebene generiert, unabhängig davon, welche Art von Box ursprünglich im normalen Ablauf generiert wurde.

• behoben:
  Das Elementfeld verhält sich so, als würde man die Position auf „absolut“ setzen, aber sein enthaltender Block ist das Ansichtsfenster selbst.

3. Umschließender Block

Für schwebende Elemente wird der umschließende Block als das nächstgelegene Vorgängerelement auf Blockebene definiert.
Bei der Positionierung ist die Situation komplizierter:
- Der enthaltende Block (auch als anfänglicher enthaltender Block bezeichnet) des „Root-Elements“ wird vom Benutzeragenten erstellt. In HTML ist das Root-Element das HTML-Element, einige Browser verwenden jedoch body als Root-Element.
– Bei einem Nicht-Stammelement, dessen Positionswert relativ oder statisch ist, wird der enthaltende Block durch den Inhalt der nächstgelegenen Blockebenenbox, Tabellenzelle oder Inline-Block-Vorfahrenbox begrenzt.
– Wenn der Positionswert eines Nicht-Stammelements absolut ist, wird der enthaltende Block auf das nächstgelegene Vorgängerelement gesetzt, dessen Positionswert nicht statisch ist.

4. Offset-Attribut

Oben haben wir drei Positionierungsmechanismen vorgestellt, die vier Attribute verwenden, um den Offset jeder Seite des positionierten Elements relativ zu seinem enthaltenden Block zu beschreiben. Wir nennen diese vier Eigenschaften Offset-Eigenschaften, die ein wichtiger Bestandteil der Vervollständigung der Positionierung sind.
- Für Ober- und Unterseite, relativ zur Höhe des umschließenden Blocks
- Für rechts und links, relativ zur Breite des umschließenden Blocks
Diese Eigenschaften beschreiben den Versatz von der nächsten Kante des umschließenden Blocks, daher wird er auch als Versatz bezeichnet.

5. Breite und Höhe

Breite und Höhe festlegen

Wenn Sie eine bestimmte Breite für das positionierte Element angeben möchten, müssen Sie natürlich das Breitenattribut verwenden. Höhe verwenden. Es ist auch möglich, eine bestimmte Höhe für positionierte Elemente anzugeben.

Breite und Höhe begrenzen

Mit min-width und min-height können Sie eine Mindestgröße für den Inhaltsbereich des Elements definieren.
Ähnlich können Sie auch die Attribute max-width und max-height verwenden, um die Größe von Elementen zu begrenzen.

6. Inhaltsüberlauf und -ausschnitt

Überlauf

Angenommen, ein Element ist aus irgendeinem Grund auf eine bestimmte Größe festgelegt, der Inhalt passt jedoch nicht in das Element Dieses Mal können Sie das Überlaufattribut verwenden, um diese Situation zu steuern - sichtbar:
Standardwert, der angibt, dass der Inhalt des Elements auch außerhalb der Elementbox sichtbar ist. Normalerweise führt dies dazu, dass der Inhalt über die eigene Elementbox hinausragt, die Form der Box jedoch nicht verändert wird.
- ausgeblendet: Der Inhalt des
-Elements wird an der Grenze des Elementfelds zugeschnitten und es wird keine Scroll-Oberfläche bereitgestellt, um Benutzern den Zugriff auf Inhalte außerhalb des Beschneidungsbereichs zu ermöglichen; - scrollen:
Der Inhalt des Elements wird an den Grenzen der Elementbox abgeschnitten, dem Benutzer steht jedoch ein Bildlaufmechanismus zur Verfügung.

7. Inhaltsbeschneidung

Wenn der Inhalt eines absolut positionierten Elements über sein Inhaltsfeld hinausgeht und der Überlauf so eingestellt ist, dass der Inhalt beschnitten werden muss, kann die Form des Beschneidungsbereichs geändert werden unter Verwendung des Clip-Attributs.

clip:rect(top,right,bottom,left);

8. Elementsichtbarkeit

Zusätzlich zu Clipping und Overflow können Sie auch die Sichtbarkeit des gesamten Elements steuern.

Sichtbarkeit:

- sichtbar
- versteckt Unsichtbar.
- Zusammenbruch
- inherit

visibility:collapse
Bei Verwendung innerhalb eines Tabellenelements entfernt dieser Wert eine Zeile oder Spalte, hat jedoch keinen Einfluss auf das Layout der Tabelle. Der durch Zeilen oder Spalten belegte Platz wird für andere Inhalte zur Verfügung gestellt. Wenn dieser Wert für ein anderes Element verwendet wird, wird er als „versteckt“ dargestellt. visibility:hidden
Wenn sich ein Element durch Festlegen der Sichtbarkeit im Status „unsichtbar“ befindet, wirkt sich das Element weiterhin auf das Layout des Dokuments aus, als ob es noch sichtbar wäre. Mit anderen Worten: Das Element ist immer noch da, man kann es nur nicht sehen. Dies unterscheidet sich von display:none, das nicht nur unsichtbar ist. Es wird auch aus dem Dokument gelöscht, sodass es keine Auswirkungen auf das Dokumentlayout hat. 9. Absolute Positionierung

Enthält Blöcke und absolut positionierte Elemente

Wenn ein Element absolut positioniert ist, wird es vollständig aus dem Dokumentenfluss entfernt. Anschließend wird es relativ zu seinem enthaltenden Block positioniert. Das bedeutet, dass absolut positionierte Elemente andere Elemente überdecken oder von anderen Elementen überdeckt werden können.

Der umschließende Block eines absolut positionierten Elements ist das nächstgelegene Vorgängerelement, dessen Positionswert nicht statisch ist. Ersteller wählen normalerweise ein Element als umschließenden Block eines absolut positionierten Elements aus, geben seine Position als relativ an und haben keinen Versatz.

Automatischer Kantenversatz

Die allgemeine Bedeutung des Begriffs „statische Position eines Elements“ ist: die ursprüngliche Position des Elements im normalen Fluss. Genauer gesagt ist die „obere“ statische Position der Abstand vom oberen Rand des enthaltenden Blocks zum oberen Rand des imaginären Felds.

10. Platzierung und Größe nicht ersetzter Elemente

Im Allgemeinen hängen Größe und Position eines Elements von seinem enthaltenden Block ab. Der Wert jedes Attributs hat ebenfalls einen gewissen Einfluss, aber der wichtigste ist der enthaltende Block.

11. Platzierung und Größe ersetzter Elemente

Die Positionierungsregeln für nicht ersetzte Elemente und ersetzte Elemente sind sehr unterschiedlich. Dies liegt daran, dass das ersetzte Element eine inhärente Höhe und Breite hat, sodass sich seine Größe nicht ändert.
Bei der Bestimmung der Position und Größe eines ersetzten Elements lässt sich das damit verbundene Verhalten am einfachsten durch die folgenden Regeln beschreiben:
– Wenn die Breite auf „Auto“ eingestellt ist, wird die tatsächlich verwendete Breite durch die inhärente Breite des Elementinhalts bestimmt.
- Wenn in Sprachen, die von links nach rechts gelesen werden, der Wert von left auto ist, ersetzen Sie auto durch eine statische Position. Das Gleiche gilt von rechts nach links;
- Wenn links oder rechts immer noch automatisch ist, ersetzen Sie den automatischen Wert von margin-left oder margin-right durch 0; – Wenn „margin-left“ und „margin-right“ zu diesem Zeitpunkt beide als „auto“ definiert sind, setzen Sie sie auf gleiche Werte, wodurch das Element in seinem enthaltenden Block
zentriert wird - Wenn danach nur noch ein Autowert übrig ist, ändern Sie ihn so, dass er dem Rest der Gleichung entspricht.

12. Die Platzierung auf der Z-Achse

wird durch das Attribut Z-Index

13 gesteuert. Feste Positionierung ist sehr ähnlich absolute Positionierung Der enthaltende Block des festen Elements ist lediglich das Fenster. Bei der festen Positionierung wird das Element vollständig aus dem Dokumentenfluss entfernt und hat keine Position relativ zu irgendeinem Teil des Dokuments.

14. Relative Positionierung

Der am einfachsten zu verstehende Positionierungsmechanismus ist die relative Positionierung. Wenn dieser Mechanismus übernommen wird, wird das positionierte Element mithilfe des Offset-Attributs verschoben.