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
CSS bietet eine Reihe von Regeln zur Steuerung der Platzierung schwebender Elemente:
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
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
2. Positionierung
relativ:
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.
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.
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.
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.
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.
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
8. Elementsichtbarkeit
- 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
Automatischer Kantenversatz
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.
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.
Das obige ist der detaillierte Inhalt vonEinführung in die Definition und Verwendung von CSS-Floating und -Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
