So begrenzen Sie die Grenzlänge? - CSS

Bei der Gestaltung einer Website haben die Benutzer manchmal Schwierigkeiten, einen Grenze zu erstellen, der kürzer ist als ihr übergeordnetes Element. Um diese Schwierigkeit zu überwinden, werden mehrere CSS -Eigenschaften und HTML -Elemente verwendet. Für dieses Ziel einige HTML -Elemente, einschließlich “","", oder "Pseudoelemente" Und "GrenzeEigenschaften werden verwendet. Darüber hinaus können Benutzer den Rand einschränken, indem sie das verwendenGrenz-links","Grenzboden","Grenzrechte", Und "Grenze" Eigenschaften.

In diesem Beitrag wurde die Methode zur Begrenzung der Randlänge in CSS erläutert.

So begrenzen Sie die Randlänge mit CSS?

Probieren Sie die genannten Anweisungen nacheinander aus, um die Randlänge mit CSS zu begrenzen.

Schritt 1: Erstellen Sie einen DIV -Behälter

Erstellen Sie zunächst einen Div -Container mit dem “Tag und fügen Sie die "hinzu"Klasse”Attribut im Tag.

Schritt 2: Erstellt einen verschachtelten Div -Container

Fügen Sie dann einen weiteren Div -Behälter zwischen den ersten Tags hinzu und fügen Sie eine ein "ein"Ausweis”Attribut:

Schritt 3: Style das "Div" -Element

Jetzt style the “div”Durch die Anwendung der folgenden CSS -Eigenschaften:

.Main-div
Höhe: 150px;
Breite: 100px;
Position: Relativ;
Hintergrund: #b3f00b;

Die Details des oben genannten Codes sind wie folgt:

• Greifen Sie zunächst mit Hilfe des “auf den Container zu".Main-div" Klasse.
• Die hinzugefügte “HöheEigenschaft definiert die Höhe des Div -Behälters.
• Dann, "Breite”Definiert die Größe der Elementbreite.
• Nächste, "Position”Zugewiesen den für ein Element verwendeten Positionierungsmethode -Typ. Zum Beispiel haben wir das verwendetrelativUm die Position im Verhältnis zu sich selbst und dem übergeordneten Element zu ändern.
• Danach, "Hintergrund”Wird verwendet, um den Hintergrund für die DIV festzulegen.

Ausgang

Schritt 4: Untere Rand einstellen

Border-Bottom: 2PX Solid #1C2AF5;

Um den unteren Rand eines Divs, des CSS, festzulegen “Grenzboden”Wird genutzt. Hier gibt der erste Wert die Grenzbreite an, der zweite ist der Grenzstil und der dritte ist die Grenzfarbe.

Ausgang

Schritt 5: Begrenzen Sie den linken Rand

#Border-Links
Border-Links: 2PX Solid #2A1CF5;
Position: absolut;
Top: 50%;
unten: 0;

Im obigen Erwähnungscode der “#Border-Links”Wird zum Zugriff auf das DIV-Element verwendet, um die folgenden Eigenschaften anzuwenden:

• Der "Grenz-links”Ist eine Kurzform, die zum Festlegen der linken Grenze des Elements verwendet wird.
• “SpitzeDie Eigenschaft übereinstimmt vertikal das positionierte Element.
• “Unterseite”Wird verwendet, um die untere Kante des positionierten Elements auszurichten.
• “Position"Eigenschaft wird als" festgelegt "absolut”Um die Position des Behälters zu reparieren.

Ausgang

Wir haben das Verfahren zur Begrenzung der Randlänge in CSS erklärt.

Abschluss

Um die Grenzlänge zu begrenzen, machen Sie zunächst einen verschachtelten DIV -Behälter mit Hilfe des “" Schild. Greifen Sie dann mit der spezifischen Klasse oder ID darauf zu und wenden Sie die CSS -Eigenschaften für das Styling an. Als nächstes die CSS “Grenzboden”Wird verwendet, um den unteren Rand eines Elements und den“ zu setzenGrenz-linksDas Eigentum fügt eine Rand auf der linken Seite eines Elements hinzu. In diesem Tutorial wurde erklärt, wie die Randlänge mit CSS begrenzt werden kann.