Hvordan lager jeg en containerboks i HTML

For å representere ethvert element, lager vi ofte forskjellige former for utforming av formål. Mer spesifikt er boksen en av de mest brukte formene. I HTML inneholder containerboksen noe innhold. For å lage en containerboks i HTML, kan du bruke "" elementet eller "rutenettet" -beholderen.

Resultatene av denne bloggen er:

• Metode 1: Hvordan lage containerboks i HTML ved hjelp av taggen?
• Metode 2: Hvordan lage containerboks i HTML ved hjelp av “Grid” -beholderen?
• Hvordan rettferdiggjøre innholdet i en containerboks i HTML?

Metode 1: Hvordan lage containerboks i HTML ved hjelp av taggen?

I HTML, først, lage en "”Med navnet”eske”. Deretter legger du til en

Merk deg inni den for å inkludere litt innhold på siden:

Dette er en boks.

I CSS -delen, bruk stylingegenskaper på HTML -elementene for å dekorere dem.

Style Box Div

.Boks
Margin: Auto;
Bredde: 200px;
Høyde: 200px;
polstring: 10px;
Grense: 5px solid crimson;

“.eske”Brukes til å få tilgang til Div Box. Nedenfor er forklaringen på egenskapene som er brukt på den:

• “margin”Med verdien som“bil”, Brukes til å gi lik plass til Div.
• “bredde”Eiendom setter elementets bredde til“200px”.
• “høyde”Eiendom setter elementets høyde til“200px”.
• “polstring”Eiendom får en verdi av“10px”, Som tilfører 10px -plass rundt divens innhold.
• “grense" er "5px Solid Crimson”, Der 5px indikerer bredden på grensen, er faststoff den typen grensen, for eksempel spor, stiplet, stiplet og mer, og deretter viser Crimson fargen på grensen.

Produksjon

La oss nå gå til neste metode.

Metode 2: Hvordan lage containerboks i HTML ved hjelp av “Grid” -beholderen?

Elementet fungerer som en beholder når det er “vise”Eiendom er satt som“Inline-nett”Eller“Nett”. Gridbeholderne består av rader og kolonner som inneholder rutenettelementer.

La oss gå gjennom følgende eksempler for å demonstrere hvordan du lager en rutenettbeholder.

Eksempel 1: Lag containerboks i HTML ved hjelp av "Display: Grid" -egenskaper
“vise”Eiendom med verdien”Nett”Brukes til å gi utformingen av websiden i kolonner og rader. Denne egenskapen hjelper oss med å designe oppsettet uten å bruke posisjons- og flyteegenskaper.

For å gjøre det, først, oppretter et med klassenavnet "container”. Inne i dette legger du til flere div med noe innhold:

Epler
Bananer
Appelsiner
Ferskener
Druer
Aprikos

La oss snu visningen av HTML Container Div som et rutenett med CSS.

Style Container Div

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto;
Bakgrunnsfarge: #40966C;
polstring: 10px;
Gap: 20px;

Container Div brukes med følgende egenskaper:

• “vise”Eiendom tildeles verdien”Nett”.
• “rutenett-template-kolonner" som "Auto Auto Auto”, Som spesifiserer at det skal være tre kolonner i nettet.
• “bakgrunnsfarge”Eiendom er satt som“#40966C”.
• “polstring" som "10px”Angir 10px plass rundt divens innhold.
• “mellomrom”Er satt som“20px”For å spesifisere mellomrommet mellom kolonnene.

Vi vil se oppførselen til gapegenskapen i den videre delen.

Style Div Elements of Container Div

.container> div
Bakgrunnsfarge: #C4D1CB;
tekst-align: sentrum;
polstring: 20px auto;
Font-størrelse: 35px;

“.Container> Div”Brukes til å representere at vi ønsker å style Div -elementet, som er barnet til container div. Mer spesifikt, “>”Tegn er kjent som barnelektoren.

Nedenfor er egenskapene som brukes på containerdiven:

• “bakgrunnsfarge”Eiendom spesifiserer fargen på elementets bakgrunn.
• “Tekstalign”Er satt som“senter”For å senter justere divens innhold.
• “polstring”Er spesifisert som“20px auto”, Der 20px er plassen i toppbunnen, og auto indikerer at det er like rom fra venstre høyre side.
• “skriftstørrelse”Eiendomsverdi satt som“35px”Som skriftstørrelse.

Nedenfor er den tilsvarende utgangen til den ovennevnte koden:

Eksempel 2: Lag containerboks i HTML ved hjelp av "Display: Inline-Grid" -egenskaper
“vise”Eiendom med verdien”Inline-nett”Oppretter en containerboks på nettet nivå.

CSS
Displayegenskapen til ovennevnte DIV-container er satt til inline-grid:

Display: Inline-Grid;

Produksjon

Eksempel 3: Lag containerboks i HTML ved å bruke "GRID-Template-Columns" -egenskaper
“rutenett-template-kolonner”Eiendom definerer kolonnebredden på beholderen, og dets relevante antall kolonner:

rutenett-template-kolonner: Auto Auto Auto;

Dette vil resultere i tre kolonner med samme størrelse. Du kan imidlertid definere kolonnebredde i henhold til din preferanse:

Eksempel 4: Lag containerboks i HTML ved å bruke "GRID-Template-Rows" -egenskaper
Denne egenskapen definerer høyden og antallet av radene på beholderen:

rutenett-Template-Rows: Auto Auto 100px;

Ovennevnte syntaks vil resultere i at to rader har like høyder og den tredje som "100px”:

Så langt har vi diskutert hvordan du legger til rader og kolonner i rutenettbeholderen. I neste avsnitt demonstrerer vi eksemplet for å rettferdiggjøre innholdet i beholderen.

Hvordan rettferdiggjøre innholdet i en containerboks i HTML?

“Justify-Content”Eiendom kan brukes til å justere hele rutenettet inne i beholderen. For å få denne egenskapen til å fungere, må nettets totale bredde være mindre enn beholderens bredde.

Denne egenskapen har flere verdier som er listet opp nedenfor:

• start
• slutt
• Space-Evenly
• rom-rundt
• plass mellom
• senter

Beskrivelsen av de ovennevnte verdiene vil bli diskutert praktisk.

Eksempel 1: Senter rettferdiggjør innholdet i en containerboks i HTML
I CSS -delen, sett "vise”Eiendom som“Nett”Og legg deretter til eiendommen”Justify-Content”Og tilordne verdien”senter”:

Justify-Content: Center;

Det kan observeres at innholdet i rutenettet er blitt midtstilt på linje:

Eksempel 2: Tilpass generelle hull i en containerboks i HTML
Du kan tilpasse rutenettet med "mellomrom”Eiendom som følger:

Gap: 20px;

Det kan sees at hullene på 20px er vellykket lagt til nettbeholderen:

Eksempel 3: Tilpass radhull over en containerboks i HTML
“rad-gap”Eiendom brukes til å spesifikt sette inn mellomrom mellom radene. I eksemplet vil vi sette hullene mellom containerradene som "20px”:

Row-gap: 20px;

Produksjon

EKSEMPEL 4: Tilpass kolonner Gap av en containerboks i HTML
Vi kan også tilpasse hullene mellom kolonnene. For å oppnå dette bruker vi eiendommen “kolonne-gap”.

Nå, tilordne “kolonne-gap”Eiendoms verdi som“20px”:

kolonne-gap: 20px;

Observer det genererte gapet mellom kolonnene:

Slik kan vi lage containerbokser i HTML og tilpasse rommene deres.

Konklusjon

Containere er bokser som inneholder noe innhold i dem. Elementet kan brukes til å lage en containerboks ved å sette sin bredde og høydeegenskaper. I CSS, ved å bruke “Nett”Kan også utføre den samme operasjonen. Denne bloggen diskuterte metoden for å lage en containerboks i HTML.