Jak zrobić pojemnik w HTML

Aby reprezentować dowolny element, często tworzymy różne kształty do projektowania. Mówiąc dokładniej, pudełko jest jednym z najczęściej używanych kształtów. W HTML skrzynka kontenerowa zawiera pewną zawartość. Aby zrobić pojemnik w HTML, możesz użyć elementu „” lub pojemnika „siatka”.

Wyniki tego bloga to:

• Metoda 1: Jak utworzyć skrzynkę kontenerową w HTML za pomocą znacznika?
• Metoda 2: Jak utworzyć skrzynkę kontenerową w HTML za pomocą pojemnika „siatka”?
• Jak uzasadnić zawartość pola kontenera w HTML?

Metoda 1: Jak utworzyć skrzynkę kontenerową w HTML za pomocą znacznika?

W HTML najpierw stwórz „”Z nazwą„skrzynka". Następnie dodaj

Zagaduj wewnątrz, aby dołączyć trochę treści na stronie:

To jest pudełko.

W sekcji CSS zastosuj właściwości stylizacyjne do elementów HTML, aby je ozdobić.

Style Box Div

.skrzynka
Margines: Auto;
szerokość: 200px;
Wysokość: 200px;
Wyściółka: 10px;
granica: 5px Solid Crimson;

„„.skrzynka”Służy do uzyskania dostępu do skrzynki DIV. Poniżej znajduje się wyjaśnienie właściwości zastosowanych:

• "margines”Z wartością ustawioną jako„automatyczny”, Służy do dawania równej przestrzeni Div.
• "szerokość„Właściwość ustawia szerokość elementu na„200px".
• "wysokość„Właściwość ustawia wysokość elementu na„200px".
• "wyściółka„Własność ma wartość„10px”, Który dodaje 10px przestrzeń wokół treści DIV.
• "granica" Jest "5px Solid Crimson”, Gdzie 5px wskazuje szerokość granicy, stał.

Wyjście

Teraz przejdźmy do następnej metody.

Metoda 2: Jak utworzyć skrzynkę kontenerową w HTML za pomocą pojemnika „siatka”?

Element działa jako pojemnik, gdy jest „wyświetlacz„Własność jest ustalona jako„sieć rzędowa" Lub "siatka". Pojemniki siatki zawierają rzędy i kolumny zawierające elementy siatki.

Przejrzyjmy następujące przykłady, aby pokazać, jak zrobić pojemnik na siatkę.

Przykład 1: Utwórz pole kontenera w HTML za pomocą właściwości „Display: Grid”
„„wyświetlacz„Własność o wartości”siatka”Jest wykorzystywany do zapewnienia układu strony internetowej w kolumnach i wierszach. Ta właściwość pomaga nam zaprojektować układ bez użycia właściwości pozycji i float.

Aby to zrobić, najpierw stwórz nazwę klasy „pojemnik". Wewnątrz dodaj jeszcze kilka Divów z pewnymi treściami:

Jabłka
Banany
Pomarańcze
Brzoskwinie
Winogrona
Morela

Odwróćmy wyświetlanie kontenera HTML Div jako siatki z CSS.

Styl Container Div

.pojemnik
Wyświetlacz: siatka;
Kolecki z kradzieżą gridów: automatyczne automatyczne auto;
kolor tła: #40966c;
Wyściółka: 10px;
Gap: 20px;

Div kontenera jest stosowany z następującymi właściwościami:

• "wyświetlacz„Wartość jest przypisana wartość”siatka".
• "Kolecki z kratami" Jak "Auto Auto Auto”, Który określa, że ​​w siatce powinny znajdować się trzy kolumny.
• "kolor tła„Własność jest ustalona jako„#40966C".
• "wyściółka" Jak "10px”Określa przestrzeń 10px wokół treści DIV.
• "luka”Jest ustawiony jako„20px„Aby określić przestrzeń między kolumnami.

Zobaczymy zachowanie właściwości luki w dalszej części.

Style Div Elements of Container Div

.kontener> div
kolor tła: #c4d1cb;
Text-Align: Center;
Wyściółka: 20px auto;
Rozmiar czcionki: 35px;

„„.kontener> div”Służy do reprezentowania tego, że chcemy stylizować element div, który jest dzieckiem kontenerów div. Mówiąc dokładniej, „>„Znak jest znany jako selektor dziecięcy.

Poniżej znajdują się właściwości zastosowane do Div kontener:

• "kolor tła„Właściwość określa kolor tła elementu.
• "tekst-align”Jest ustawiony jako„Centrum„Aby wyrównać zawartość DIV.
• "wyściółka”Jest określony jako„20px Auto”, Gdzie 20px to przestrzeń w górnym dnie, a Auto wskazuje równą przestrzeń od lewej strony.
• "rozmiar czcionki„Wartość właściwości ustalona jako„35px”Jako rozmiar czcionki.

Poniżej znajduje się odpowiednie wyjście wyżej wymienionego kodu:

Przykład 2: Utwórz pola kontenerowe w HTML za pomocą właściwości „Display: Inline-Grid”
„„wyświetlacz„Własność o wartości”sieć rzędowa”Tworzy pojemnik na poziomie rzędowym.

CSS
Właściwość wyświetlacza wyżej wymienionego kontenera Div jest ustawiona na sieć one:

Wyświetlacz: sieć inline;

Wyjście

Przykład 3: Utwórz pola kontenerowe w HTML za pomocą właściwości „-grid-tablania”
„„Kolecki z kratami„Właściwość określa szerokość kolumny pojemnika i jego odpowiednią liczbę kolumn:

Kolecki z kradzieżą gridów: automatyczne automatyczne auto;

Spowoduje to trzy kolumny o równym rozmiarze. Możesz jednak zdefiniować szerokość kolumny zgodnie z preferencjami:

Przykład 4: Utwórz pola kontenera w HTML za pomocą właściwości „Rows-tablania sieci”
Ta właściwość określa wysokość i liczbę wierszy kontenera:

Rowki z kratą siatki: automatyczne automatyczne 100px;

Powyższa składnia spowoduje, że dwa rzędy mają równe wysokości, a trzeci jako „100px”:

Do tej pory omówiliśmy, jak dodać wiersze i kolumny do naszego kontenera siatki. W następnej sekcji demonstrujemy przykład uzasadnienia zawartości pojemnika.

Jak uzasadnić zawartość pola kontenera w HTML?

„„justify-content„Własność można wykorzystać do wyrównania całej siatki wewnątrz pojemnika. Aby ta nieruchomość działała, całkowita szerokość siatki musi być mniejsza niż szerokość kontenera.

Ta właściwość ma kilka wartości wymienionych poniżej:

• początek
• koniec
• przestrzeń-nawet
• kosmiczny
• przestrzeń pomiędzy
• Centrum

Opis powyższych wartości zostanie omówiony praktycznie.

Przykład 1: Centrum uzasadnić zawartość pola kontenera w HTML
W sekcji CSS ustaw „wyświetlacz„Nieruchomość jako„siatka”A następnie dodaj nieruchomość„justify-content”I przypisz wartość„Centrum”:

Justify-Content: Center;

Można zauważyć, że zawartość siatki została pomyślnie wyrównana:

Przykład 2: Dostosuj ogólne luki pola kontenerowego w HTML
Możesz dostosować luki w siatce za pomocą „luka„Nieruchomość w następujący sposób:

Gap: 20px;

Można zauważyć, że luki 20px są z powodzeniem dodawane do kontenera siatki:

Przykład 3: Dostosuj luki wiersza pola kontenerowego w HTML
„„Gapa w wierszach„Właściwość służy do konkretnego wstawienia przestrzeni między wierszami. W przykładzie ustawimy luki między wierszami kontenerów jako „20px”:

Gapa wiersza: 20px;

Wyjście

Przykład 4: Dostosuj luki w kolumnach pola kontenerowego w HTML
Możemy również dostosować luki między kolumnami. Aby to osiągnąć, wykorzystujemy nieruchomość „luka w kolumnie".

Teraz przypisz „luka w kolumnie„Wartość właściwości jako„20px”:

Gapa w kolumnie: 20px;

Obserwuj wygenerowaną szczelinę między kolumnami:

W ten sposób możemy tworzyć pola kontenerowe w HTML i dostosować ich przestrzenie.

Wniosek

Kontenery to pudełka zawierające w nich pewne zawartość. Element można wykorzystać do tworzenia pojemnika, ustawiając jego właściwości szerokości i wysokości. W CSS, wykorzystując „siatka”Może również wykonać tę samą operację. W tym blogu omówiono metodę tworzenia skrzynki kontenerowej w HTML.