Wie mache ich eine Containerbox in HTML?

Um ein Element darzustellen, erstellen wir häufig verschiedene Formen für Designzwecke. Insbesondere ist die Box eine der am häufigsten verwendeten Formen. In HTML enthält die Containerbox einige Inhalte. Um eine Containerbox in HTML zu erstellen.

Die Ergebnisse dieses Blogs sind:

• Methode 1: Erstellen Sie mit dem Tag Containerbox in HTML?
• Methode 2: So erstellen Sie Containerbox in HTML mit dem "Grid" -Container?
• So rechtfertigen Sie den Inhalt einer Containerbox in HTML?

Methode 1: Erstellen Sie mit dem Tag Containerbox in HTML?

Erstellen Sie zuerst in HTML eine “"Mit dem Namen"Kasten”. Dann fügen Sie a hinzu

Markieren Sie darin, um Inhalte in die Seite einzuschließen:

Dies ist eine Schachtel.

Wenden Sie im CSS -Abschnitt Stylingeigenschaften auf die HTML -Elemente an, um sie zu dekorieren.

Style Box Div

.Kasten
Rand: Auto;
Breite: 200px;
Höhe: 200px;
Polsterung: 10px;
Grenze: 5px fest purpurrot;

Der ".Kasten”Wird verwendet, um auf die Div -Box zuzugreifen. Unten finden Sie die Erläuterung der darauf angewendeten Eigenschaften:

• “Rand"Mit dem Wert festgelegt als"Auto”, Wird verwendet, um dem Div den gleichen Raum zu geben.
• “Breite"Eigenschaft legt die Breite des Elements auf"200px”.
• “Höhe"Eigenschaft setzt die Höhe des Elements auf"200px”.
• “Polsterung"Eigenschaft erhält einen Wert von"10px”, Der den Inhalt des DIV um den 10px -Raum hinzufügen.
• “Grenze" Ist "5px Solid Crimson”, Wobei 5px die Breite des Randes angibt, fest ist die Art des Randes, wie z.

Ausgang

Lassen Sie uns nun zur nächsten Methode wechseln.

Methode 2: So erstellen Sie Containerbox in HTML mit dem "Grid" -Container?

Das Element funktioniert als Container, wenn es ist “Anzeige"Eigenschaft wird als" festgelegt "Inline-Gitter" oder "Netz”. Die Netzbehälter umfassen Zeilen und Spalten, die Rasterelemente enthalten.

Lassen Sie uns die folgenden Beispiele durchlaufen, um zu demonstrieren, wie ein Rasterbehälter erstellt wird.

Beispiel 1: Containerbox in HTML erstellen mit der Eigenschaft "Anzeige: Grid"
Der "Anzeige”Eigenschaft mit dem Wert“Netz”Wird verwendet, um das Layout der Webseite in Spalten und Zeilen bereitzustellen. Diese Eigenschaft hilft uns, das Layout zu entwerfen, ohne Position und Schwimmereigenschaften zu verwenden.

Erstellen Sie zuerst einen mit dem Klassennamen “Container”. In diesem Fall fügen Sie mehrere weitere Divs mit einigen Inhalten hinzu:

Äpfel
Bananen
Orangen
Pfirsiche
Trauben
Aprikose

Lassen Sie uns die Anzeige des HTML -Container -DIV als Gitter mit CSS drehen.

Style Container Div

.Container
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto;
Hintergrundfarbe: #40966c;
Polsterung: 10px;
Lücke: 20px;

Der Container -Div wird mit den folgenden Eigenschaften angewendet:

• “Anzeige"Eigenschaft wird der Wert zugewiesen"Netz”.
• “Grid-Template-Säulen" als "Auto Auto Auto”, Was angibt, dass es drei Spalten im Netz geben sollte.
• “Hintergrundfarbe"Eigenschaft wird als" festgelegt "#40966c”.
• “Polsterung" als "10px”Gibt den 10px -Raum um den Inhalt des DIV an.
• “Lücke”Wird als" eingestellt "20pxUm den Raum zwischen den Spalten anzugeben.

Wir werden das Verhalten der Gap -Eigenschaft im weiteren Abschnitt sehen.

Stildivelelemente von Container div

.Container> div
Hintergrundfarbe: #C4D1CB;
Text-Align: Mitte;
Polsterung: 20px Auto;
Schriftgröße: 35px;

Der ".Container> divWird verwendet, um darzustellen, dass wir das Divelelement stylen wollen, das das Kind von Container Div ist. Genauer gesagt das “>”Zeichen ist als Kinderwahl bekannt.

Im Folgenden finden Sie die Eigenschaften, die auf den Container -Div angewendet werden:

• “HintergrundfarbeEigenschaft gibt die Farbe des Hintergrunds des Elements an.
• “Textausrichtung”Wird als" eingestellt "CenterUm den Inhalt des Div auszurichten.
• “Polsterung"Ist als" spezifiziert als "20px Auto”, Wobei 20px der Raum am Top-Bottom ist, und das Auto zeigt den gleichen Raum von links nach rechts an.
• “Schriftgröße"Eigenschaftswert als" festgelegt "35px”Als Schriftgröße.

Unten finden Sie die entsprechende Ausgabe des oben genannten Code:

Beispiel 2: Container-Box in HTML erstellen mit der Eigenschaft "Anzeige: Inline-Grid"
Der "Anzeige”Eigenschaft mit dem Wert“Inline-Gitter”Erstellt eine Inline-Containerbox auf Inline-Ebene.

CSS
Die Anzeigeeigenschaft des oben genannten Div-Containers ist auf Inline-Grid eingestellt:

Anzeige: Inline-Grid;

Ausgang

Beispiel 3: Containerbox in HTML erstellen mit der Eigenschaft „Grid-Template-Säulen“
Der "Grid-Template-Säulen”Eigenschaft definiert die Spaltenbreite des Containers und ihre relevante Anzahl von Spalten:

Grid-Template-Säulen: Auto Auto Auto;

Dies führt zu drei Spalten mit gleicher Größe. Sie können jedoch die Spaltenbreite entsprechend Ihrer Präferenz definieren:

Beispiel 4: Containerbox in HTML erstellen mit der Eigenschaft „Grid-Template-Rows“
Diese Eigenschaft definiert die Höhe und Anzahl der Zeilen des Containers:

Grid-Template-Reihen: Auto Auto 100px;

Die obige Syntax führt zu zwei Zeilen mit gleichen Höhen und die dritte als “100px”:

Bisher haben wir diskutiert, wie wir unserem Gitterbehälter Zeilen und Spalten hinzufügen können. Im nächsten Abschnitt zeigen wir das Beispiel, um den Inhalt des Containers zu rechtfertigen.

So rechtfertigen Sie den Inhalt einer Containerbox in HTML?

Der "RechtfertigungsbekämpfungEigenschaften können zum Ausrichten des gesamten Gitters im Behälter verwendet werden. Um diese Immobilie funktionieren zu lassen, muss die Gesamtbreite des Netzes geringer sein als die Breite des Behälters.

Diese Eigenschaft enthält mehrere Werte, die unten aufgeführt sind:

• Start
• Ende
• Weltraum
• Raumfahrt
• Weltraum dazwischen
• Center

Die Beschreibung der oben gegebenen Werte wird praktisch diskutiert.

Beispiel 1: Zentrum rechtfertigen den Inhalt einer Containerbox in HTML
Setzen Sie im CSS -Abschnitt die “AnzeigeEigentum als "Netz"Und dann die Eigenschaft hinzufügen"Rechtfertigungsbekämpfung”Und den Wert zuweisen“Center”:

Justify-Content: Center;

Es kann beobachtet werden, dass der Inhalt des Netzes erfolgreich ausgerichtet wurde:

Beispiel 2: Passen Sie die Gesamtlücken einer Containerbox in HTML an
Sie können die Gitterlücken mit der “anpassenLückeEigenschaft wie folgt:

Lücke: 20px;

Es ist ersichtlich, dass die Lücken von 20px erfolgreich zum Gitterbehälter hinzugefügt werden:

Beispiel 3: Passen Sie Zeilenlücken eines Containerfelds in HTML an
Der "ZeilenlückeDie Eigenschaft wird verwendet, um den Speicherplatz speziell zwischen den Zeilen einzufügen. Im Beispiel setzen wir die Lücken zwischen den Containerreihen als "20px”:

Zeilenklappe: 20px;

Ausgang

Beispiel 4: Passen Sie Spaltenlücken eines Containerfelds in HTML an
Wir können auch die Lücken zwischen den Spalten anpassen. Um dies zu erreichen, nutzen wir das Eigentum “Säulenlücke”.

Zuweisen Sie nun die “Säulenlücke"Eigentumswert als"20px”:

Säulenlücke: 20px;

Beobachten Sie die erzeugte Lücke zwischen den Spalten:

So können wir Containerboxen in HTML erstellen und ihre Räume anpassen.

Abschluss

Container sind Kästchen, die Inhalte in sich enthalten. Das Element kann verwendet werden, um ein Containerfeld durch Einstellen seiner Breite und Höheneigenschaften zu erstellen. In CSS unter Verwendung der “Netz”Kann auch den gleichen Betrieb ausführen. In diesem Blog wurde die Methode zum Erstellen eines Containerfelds in HTML erörtert.