So verwenden Sie die ID zur Positionierung in CSS

Der

id-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind.

Der ID-Selektor wird mit „#“ definiert. Für die beiden ID-Selektoren unten kann der erste die Farbe des Elements als Rot und der zweite die Farbe des Elements als Grün definieren:

#red {color:red;}
#green {color:green;}

Im folgenden HTML-Code das p-Element mit dem ID-Attribut Rot wird rot angezeigt, und das p-Element, dessen ID-Attribut grün ist, wird grün angezeigt.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Hinweis: Das ID-Attribut kann nur einmal pro HTML-Dokument vorkommen.

CSS bietet einige Eigenschaften zum Positionieren und Schweben. Mit diesen Eigenschaften können Sie ein Spaltenlayout erstellen, einen Teil des Layouts mit einem anderen überlappen und auch das tun, was bisher war Aufgaben, die häufig im Laufe der Jahre erledigt werden und die Verwendung mehrerer Formulare erfordern.

Die Grundidee der Positionierung ist einfach: Sie ermöglicht es Ihnen zu definieren, wo die Box eines Elements relativ zu seiner normalen Position oder relativ zu einem übergeordneten Element, einem anderen Element oder sogar dem Browserfenster selbst erscheinen soll. 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.

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.

CSS-Positionseigenschaft

Durch die Verwendung der Positionseigenschaft können wir aus 4 verschiedenen Positionierungsarten wählen, die sich darauf auswirken, wie die Elementbox generiert wird.

Die Bedeutung des Positionsattributwerts:

statisch

Das Elementfeld wird normal generiert. Elemente auf Blockebene erstellen ein rechteckiges Feld als Teil des Dokumentflusses, während Inline-Elemente ein oder mehrere Zeilenfelder erstellen, die innerhalb ihres übergeordneten Elements platziert werden.

relativ

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

absolute

-Elementbox wird vollständig aus dem Dokumentfluss entfernt und relativ zu ihrem enthaltenden Block positioniert. Der umschließende Block kann ein anderes Element im Dokument oder der anfängliche umschließende Block sein. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.

behoben

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

Tipp: Die relative Positionierung wird eigentlich als Teil des normalen Flusspositionierungsmodells betrachtet, da die Position eines Elements relativ zu seiner Position im normalen Fluss ist.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die ID zur Positionierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!