HTML-CSS-Grundlagen

HTML-CSS-Grundlagen

In CSS werden Tag-Elemente in HTML im Allgemeinen in drei verschiedene Typen unterteilt: Blockelemente, Inline-Elemente (auch Inline-Elemente genannt) und Inline-Blockelemente.

Häufig verwendete Blockelemente sind:

,

,

...

,

,

,

, ,

,

,

Häufig verwendete Inline-Elemente sind:

, ,
, , , , , , , ,

Häufig verwendete Inline-Blockelemente sind:

,

Funktionen von Elementen auf Blockebene:

1 Jedes Element auf Blockebene beginnt in einer neuen Zeile und nachfolgende Elemente beginnen ebenfalls in einer neuen Zeile. (Es ist wirklich dominant, ein Element auf Blockebene belegt seine eigene Zeile)

2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden.

3. Wenn die Breite eines Elements nicht festgelegt ist, beträgt sie 100 % des übergeordneten Containers (identisch mit der Breite des übergeordneten Elements), sofern keine Breite festgelegt ist.

Funktionen von Inline-Elementen:

1. In derselben Zeile wie andere Elemente

2. Die Höhe, Breite sowie der obere und untere Rand des Elements können nicht festgelegt werden ;

3. Die Breite eines Elements ist die Breite des darin enthaltenen Textes oder Bildes und kann nicht geändert werden.

Inline-Block-Elementfunktionen:

1. Auf der gleichen Zeile wie andere Elemente.

2 element Alles kann eingestellt werden.

CSS enthält 3 grundlegende Layoutmodelle, auf Englisch zusammengefasst als: Flow, Layer und Float.
In Webseiten gibt es drei Layoutmodelle:
1. Fließmodell (Float)
3. Ebenenmodell (Ebene)


Erstes Lassen Sie uns über das Flow-Modell sprechen. Flow ist der Standard-Layoutmodus für Webseiten. Das heißt, die HTML-Webelemente der Webseite verteilen im Standardzustand den Webseiteninhalt gemäß dem Flussmodell.

Das Fluid-Layout-Modell weist zwei typische Merkmale auf:

Erstens werden Blockelemente vertikal erweitert und in der Reihenfolge von oben nach unten innerhalb des enthaltenden Elements verteilt, da in Standardmäßig die Breite von Blockelemente beträgt 100 %. Tatsächlich belegen alle Blockelemente Positionen in Form von Zeilen.

Zweiter Punkt: Unter dem Flussmodell werden Inline-Elemente horizontal von links nach rechts innerhalb des enthaltenden Elements angezeigt.

Das Ebenenlayoutmodell ähnelt der sehr beliebten Ebenenbearbeitungsfunktion in der Bildsoftware PhotoShop. Aufgrund der Mobilität der Webseitengröße kann jedoch jede Ebene genau positioniert und bedient werden , Ebenenlayout hat keine Kann beliebt sein. Die lokale Verwendung des Ebenenlayouts auf einer Webseite bietet jedoch immer noch Vorteile.




So positionieren Sie HTML-Elemente in Webseiten genau. Genau wie die Ebenen in der Bildsoftware PhotoShop kann jede Ebene genau positioniert und bedient werden. CSS definiert eine Reihe von Positionierungseigenschaften zur Unterstützung des Ebenenlayoutmodells.

Das Ebenenmodell hat drei Formen:

1. Absolute Positionierung (Position: absolut)

Relative Positionierung (Position: relativ)

3 . Feste Positionierung (Position: fest)

Ebenenmodell – absolute Positionierung:

Wenn Sie die absolute Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position:absolute ( Dies zeigt die absolute Positionierung an. Die Funktion dieser Anweisung besteht darin, das Element aus dem Dokumentfluss zu ziehen und dann die Attribute links, rechts, oben und unten zu verwenden, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Block mit einem Positionierungsattribut durchzuführen . Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.




Ebenenmodell – relative Positionierung:

Wenn Sie die relative Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position: relative (gibt die relative Positionierung an) festlegen. welches links, rechts durchläuft Die Attribute , oben und unten bestimmen die Versatzposition des Elements im normalen Dokumentfluss. Der Prozess der relativen Positionierung besteht darin, zunächst ein Element im statischen (Float-)Modus zu erzeugen (und das Element schwebt wie eine Ebene) und sich dann relativ zur vorherigen Position zu bewegen. Die Richtung und Amplitude der Bewegung werden durch die linke und rechte Position bestimmt , oben und unten bleibt die Position vor dem Versatz unverändert.




Seitenmodell – feste Positionierung:

fest: zeigt eine feste Positionierung an, ähnlich dem absoluten Positionierungstyp, aber seine relativen Bewegungskoordinaten sind die Ansicht (Webseitenfenster innerhalb des Bildschirms) selbst. Da die Ansicht selbst fest ist, ändert sie sich beim Scrollen der Bildlaufleiste des Browserfensters nicht, es sei denn, Sie verschieben die Bildschirmposition des Browserfensters auf dem Bildschirm oder ändern die Anzeigegröße des Browserfensters, sodass dies bei fest positionierten Elementen der Fall ist immer an einer bestimmten Position der Ansicht im Browserfenster sein, die vom Fluss des Dokuments nicht beeinflusst wird. Dies hat die gleiche Funktion wie das Attribut „background-attachment:fixed“.



Es gibt drei Möglichkeiten, Blockelemente mit variabler Breite zu zentrieren (diese drei Methoden werden derzeit häufig verwendet):

Tabellen-Tag hinzufügen

Anzeige festlegen: Inline-Methode: Legen Sie ähnlich wie bei der ersten Methode den Anzeigetyp auf Inline-Elemente fest und legen Sie die Attribute von Elementen mit variabler Breite fest

Position festlegen: relativ und links: 50 %: Verwenden Sie die relative Positionierung, um das Element um 50 % nach links zu verschieben, um den Zweck der Zentrierung zu erreichen.

Vertikale Zentrierung einer einzelnen Textzeile bestimmt durch die Höhe des übergeordneten Elements Die Methode wird erreicht, indem die Höhe und Zeilenhöhe des übergeordneten Elements konsistent eingestellt werden. (height: die Höhe des Elements, line-height: Wie der Name schon sagt, bezieht sich die Zeilenhöhe (Zeilenabstand) auf den Abstand zwischen den Grundlinien zwischen den Zeilen im Text). In den Browsern Chrome, Firefox und IE8 oder höher können Sie die Anzeige von Elementen auf Blockebene auf Tabellenzelle setzen (auf Tabellenzellenanzeige einstellen) und das Vertical-Align-Attribut aktivieren. Beachten Sie jedoch, dass IE6 und 7 diesen Stil nicht unterstützen .Kompatibilitätsvergleich Unterschied.