Wie versteht man die CSS-Positionierung?

Mit der CSS-Positionierungseigenschaft können Sie Elemente positionieren.

CSS-Positionierung und Floating

CSS bietet einige Eigenschaften für die Positionierung und das Floating. Mit diesen Eigenschaften können Sie ein Spaltenlayout erstellen und Teile des Layouts kombinieren mit Der andere Teil überschneidet sich und kann auch Aufgaben erfüllen, die im Laufe der Jahre oft die Verwendung mehrerer Formulare erforderten. (Empfohlenes Lernen: CSS-Einführungs-Tutorial)

Die Grundidee der Positionierung ist einfach. Sie ermöglicht es Ihnen, zu definieren, wo die Elementbox relativ zu ihrer normalen Position erscheinen soll. oder relativ zu seinem übergeordneten Element, einem anderen Element oder sogar dem Browserfenster selbst.

Offensichtlich ist diese Funktion sehr mächtig und überraschend. Es sollte nicht überraschen, dass Benutzeragenten die Positionierung in CSS2 viel besser unterstützen als andere Aspekte.

Floats hingegen wurden erstmals in CSS1 eingeführt und basierten auf einer Funktion, die Netscape in den frühen Tagen des Webs hinzugefügt hatte. Beim Floating handelt es sich zwar nicht genau um eine Positionierung, aber es handelt sich sicherlich auch nicht um ein normales Flow-Layout. Wir werden die Bedeutung von float in einem späteren Kapitel klären.

Alles ist eine Box

Ein div-, h1- oder p-Element wird oft als Element auf Blockebene bezeichnet. Dies bedeutet, dass diese Elemente als ein Inhaltsblock, eine „Blockbox“, erscheinen. Im Gegensatz dazu werden Elemente wie span und strong als „Inline-Elemente“ bezeichnet, da ihr Inhalt innerhalb einer Zeile, einer „Inline-Box“, erscheint.

Sie können den Typ des generierten Felds mithilfe der Anzeigeeigenschaft ändern. Das bedeutet, dass Sie Inline-Elemente (z. B. -Elemente) dazu bringen können, sich wie Elemente auf Blockebene zu verhalten, indem Sie die Anzeigeeigenschaft auf Block setzen.

Sie können die Anzeige auch auf „Keine“ setzen, sodass das generierte Element überhaupt keinen Rahmen hat. Dadurch ist die Box mit ihrem gesamten Inhalt nicht mehr sichtbar und nimmt keinen Platz im Dokument ein.

Aber in einem Fall wird ein Element auf Blockebene auch ohne explizite Definition erstellt. Dies geschieht, wenn Sie am Anfang eines Elements auf Blockebene (z. B. einem Div) Text hinzufügen. Auch wenn der Text nicht als Absatz definiert ist, wird er als solcher behandelt:

<div>
some text
<p>Some more text.</p>
</div>

In diesem Fall wird die Box als unbenannte Blockbox bezeichnet, da sie keinem spezifisch definierten Element zugeordnet ist. Eine ähnliche Situation tritt bei Textzeilen für Elemente auf Blockebene

auf. Angenommen, Sie haben einen Absatz mit drei Textzeilen. Jede Textzeile bildet ein unbenanntes Feld. Sie können Stile nicht direkt auf namenlose Blöcke oder Linienkästen anwenden, da es keinen Ort zum Anwenden von Stilen gibt (beachten Sie, dass Linienkästen und Inline-Kästen zwei unterschiedliche Konzepte sind). Es hilft jedoch zu verstehen, dass alles, was Sie auf dem Bildschirm sehen, eine Art Box bildet.

CSS-Positionierungsmechanismus

CSS verfügt über drei grundlegende Positionierungsmechanismen: Normalfluss, Floating und absolute Positionierung.

Alle Kartons werden im normalen Fluss positioniert, sofern nicht ausdrücklich anders angegeben. Das heißt, die Position eines Elements im normalen Fluss wird durch die Position des Elements in (X)HTML bestimmt.

Boxen auf Blockebene werden von oben nach unten nacheinander angeordnet und der vertikale Abstand zwischen den Boxen wird aus dem vertikalen Rand der Box berechnet.

Inline-Boxen werden horizontal in einer Reihe angeordnet. Ihr Abstand kann durch horizontale Polsterung, Ränder und Ränder angepasst werden. Vertikaler Abstand, Rahmen und Ränder haben jedoch keinen Einfluss auf die Höhe des Inline-Felds. Die durch eine Linie gebildete horizontale Box wird als Linienbox bezeichnet. Die Höhe einer Zeilenbox ist immer hoch genug, um alle darin enthaltenen Inline-Boxen aufzunehmen. Durch Festlegen der Zeilenhöhe kann sich jedoch die Höhe dieses Felds erhöhen.

Das obige ist der detaillierte Inhalt vonWie versteht man die CSS-Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!