CSS unten

In diesem Artikel werden wir die Eigenschaft eines Elements diskutieren, das als "unten" bezeichnet wird. Diese Eigenschaft wird verwendet, um das Positionsattribut eines in einer HTML -Datei vorhandenen Elements zu definieren. Die Eigenschaft „Boden“ ist Teil der Untergruppe der Positionseigenschaften, die eine obere, linke und rechte Eigenschaften enthält. In diesem Artikel werden wir verschiedene Methoden diskutieren, mit denen wir die untere Eigenschaft einem Element zuweisen können.

Grundeigenschaft

Die untere Eigenschaft wird verwendet, um die Positionierung eines Elements aus der Basis der Seite zu definieren, und definiert die Lücke zwischen dem Ende der Seite und dem Element. Um die untere Eigenschaft zu definieren, verwenden wir die folgende Syntax:

Wie wir sehen können, wird die untere Eigenschaft angegeben, indem das Schlüsselwort aufgerufen wird, gefolgt von einem Wert, der in fünf verschiedenen Typen variieren kann: Auto, Länge, Prozentsatz, Anfang und Erben. Die untere Eigenschaft wirkt sich nur auf das Element aus, wenn die Positionseigenschaft so eingestellt ist.

Methode 01: Verwenden des Auto -Schlüsselworts zum Zuweisen der unteren Eigenschaft in einer HTML -Datei mit Hilfe von Inline -CSS

In dieser Methode werden das automatische Schlüsselwort verwendet, um die untere Eigenschaft eines Elements in einer HTML -Datei zuzuweisen. Dadurch werden das Element mit der Basis der Browser -Seite ausgerichtet. Wir werden das Inline -CSS -Styling -Format in dieser Methode verwenden, um der unteren Eigenschaft einem Element zuzuweisen.

Im vorherigen Skript haben wir mit dem H1 -Tag und einigen Inline -CSS einen Übergang zum Körper zur Verfügung gestellt. Dann haben wir ein Absatz -Tag geöffnet, und in diesem Tag haben wir die Position und die untere Eigenschaft hinzugefügt und sie auf "behoben" bzw. "automatisch" gesetzt. Mit der Position mit fester Position können Sie den Boden auf das Absatz -Tag erstellen und anhand unseres Browsers anpassen. Jetzt speichern wir diese Datei und führen sie in unserem Browser aus, um die Wirkung dieser Eigenschaft zu beobachten.

Wie wir im vorherigen Screenshot sehen können, ist der Absatz im Body -Tag zwischen der Seite nach der Überschrift vorhanden. Dies geschah aufgrund der Position und der unteren Eigenschaften.

Methode 02: Verwenden der Pixel, um die untere Eigenschaft in einer HTML -Datei mit Hilfe von Inline -CSS zuzuweisen

In diesem Ansatz zuweisen wir das untere Attribut eines Elements in einer HTML -Datei mit dem Längenformat (Wert in Pixel). Dadurch wird das Element mit Hilfe der angegebenen Länge mit der unteren Rand der Browserseite angepasst.

Wir haben das H1 -Tag und einige Inline -CSS verwendet, um dem Körper im vorherigen Skript eine Überschrift zu geben. Dann haben wir ein Absatz -Tag geöffnet und die Position und die unteren Eigenschaften darauf angewendet. Die Positionseigenschaft wurde dann auf "fest" gesetzt, und die untere Eigenschaft erhielt einen Pixelwert von „25px“.Das festgelegte Attribut mit der Position ermöglicht das unten. Jetzt speichern wir diese Datei und führen sie in unserem Browser aus, um zu sehen, wie diese Eigenschaft funktioniert.

Wie wir im vorherigen Screenshot sehen können, befindet sich der Absatz im Body -Tag am Ende der Seite nach der Überschrift. Wir können sehen, dass es eine Lücke zwischen dem Absatz und der Basis der Seite gibt, da die Position und die unteren Eigenschaften so eingestellt sind, dass sie eine Länge von „25px“ verleiht.

Methode 03: Verwenden der unteren Eigenschaft mit einem „Prozentsatz“ für ein Element unter Verwendung von Inline -CSS

In dieser Methode werden wir das Prozentformat verwenden, um die untere Eigenschaft eines Elements in einer HTML -Datei festzulegen. Dies führt dazu. In dieser Methode werden wir ein Element mit dem Inline -CSS -Stil zu einem Element hinzufügen.

Im vorherigen Skript haben wir das „H1“ -Tag und einige Inline -CSS verwendet, um dem Körper eine Überschrift zu geben. Dann haben wir ein Absatz -Tag geöffnet und seine Position und die untere Eigenschaft festgelegt. Die Positionseigenschaft wurde dann auf "fest" festgelegt und die untere Eigenschaft erhielt einen prozentualen Wert, der „30 Prozent“ beträgt.Mit der Position mit fester Position ermöglicht das unten. Wir speichern diese Datei jetzt und öffnen sie in unserem Browser, um zu überprüfen, wie diese Eigenschaft funktioniert.

Wie im vorherigen Beispiel zu sehen ist, erscheint der Absatz im Körper Tag am Ende der Seite nach dem Header. Die Position und die unteren Attribute werden auf einen prozentualen Wert von „30 Prozent“ eingestellt, sodass zwischen dem Absatz und dem Ende der Seite eine Lücke besteht.

Methode 04: Verwenden des Ernen -Schlüsselworts zum Zuweisen der unteren Eigenschaft in einer HTML -Datei mit Hilfe von Inline -CSS

In diesem Ansatz werden wir das unterste Attribut eines Elements in einer HTML -Datei mithilfe des Keywords in Ernen festlegen. Dadurch wird das Element zum Ende der Browser -Seite angepasst, indem der Eigenschaftswert der nächsten übergeordneten Funktion verwendet wird. Mit dem Inline -CSS -Stil werden wir in diesem Ansatz die untere Eigenschaft zu einem Element hinzufügen.

Im vorherigen Skript haben wir ein Absatz -Tag geöffnet und seine Position und die untere Eigenschaft festgelegt. Danach wurde die Positionseigenschaft auf "behoben" gesetzt, und die untere Eigenschaft erhielt das Schlüsselwort "Erbe".Mit der Position mit fester Position kann der Boden das Absatz -Tag beeinflussen und sie basierend auf dem Eigenschaftswert der nächsten übergeordneten Funktionen und der Seite des Browsers ändern. Diese Datei wird nun in unserem Browser gespeichert und geöffnet, um zu sehen, wie diese Eigenschaft funktioniert.

Der Absatz im Körper -Tag erscheint in der Nähe des Headers, wie im vorherigen Snippet zu sehen ist. Es gibt eine Lücke zwischen dem Absatz und dem Header, da die untere Eigenschaft angegeben ist, um dem Absatz die Eigenschaftsfunktion der nächsten übergeordneten Funktion zu geben.

Methode 05: Verwenden des anfänglichen Schlüsselworts zum Zuweisen der unteren Eigenschaft in einer HTML -Datei mit Hilfe von Inline -CSS

Wir werden das Schlüsselwort "Initial" verwenden, um die untere Eigenschaft eines Elements in einer HTML -Datei festzulegen. Dadurch wird das Element zum Ende der Browser -Seite mithilfe der Standardeinstellungen des Browsers eingestellt. In dieser Methode werden wir ein Element mit dem Inline -CSS -Stil zu einem Element hinzufügen.

Wir haben ein Absatz -Tag geöffnet und seine Position und die untere Eigenschaft festgelegt, wie im obigen Skript gezeigt. Die Positionseigenschaft wurde dann auf "behoben" gesetzt, und die untere Eigenschaft erhielt das Schlüsselwort "Initial.Mit dem festgelegten Attribut mit der Position kann der Boden das Absatz -Tag beeinflussen und es basierend auf den Standardeinstellungen des Browsers ändern. Diese Datei wird jetzt in unserem Browser gespeichert und angezeigt, um die Verwendung dieser Funktion zu demonstrieren.

Wie im vorherigen Snippet beobachtet, befindet sich der Absatz im Körper -Tag in der Nähe des Headers. Da die untere Eigenschaft angegeben ist, um den Absatz in die Standardeinstellungen unseres Browsers zu ändern, besteht eine Lücke zwischen dem Absatz und dem Header.

Abschluss

Die untere Eigenschaft von CSS wurde in diesem Artikel behandelt. Die untere Eigenschaft ist in einer Untergruppe von Positionseigenschaften wie links, rechts und oben enthalten und hängt von der Position des Positionsbesitzes ab, wie wir erläutert haben. Wir haben dieses Konzept mit Variationen im Format des Wertes implementiert, indem wir Notepad ++ zum Bearbeiten der HTML -Datei verwenden.