CSS -boksmodellen forklaret med eksempler

Hvis du planlægger at opbygge et fantastisk weblayout, skal du vide om margener, grænser, polstring og indhold. Hvert element i webdesign, hvad enten det er et billede eller tekst, bruger en boks med disse egenskaber. Du kan nemt bygge komplekse layout ved at lege med boksmodellen. I denne artikel vil vi dissekere CSS Box Model og vise dig, hvordan du bruger disse egenskaber med praktiske eksempler.

Hvad er CSS Box -modellen?

CSS -boksmodellen er en standard skabt af World Wide Web Consortium. Det beskriver alle elementerne i et HTML -dokument som rektangulære kasser med deres egne dimensioner. Disse bokse indeholder et indholdsområde og valgfri omgivende margen, kant og polstringsområder. Så lad os undersøge delene af en CSS -boks.

Lad os afdække de fire lag i CSS -boksmodellen.

Første lag: indhold

Indholdsområdet indeholder elementets hovedindhold, som kan være et billede, en tekst eller en hvilken som helst form for medieindhold. Du kan ændre dimensionerne på elementer på blokniveau ved hjælp af højde og bredde ejendomme.

Andet lag: Polstring

Polstring er mellemrummet mellem indholdsboksen og dens kantboks. Selvom det sidder omkring dit indhold som mellemrum, kan du bruge en baggrundsfarve til at visualisere forskellen. Du kan ansøge polstringstop, polstring-højre, polstring-bund, og polstring-venstre egenskaber for at ændre rummet.

Tredje lag: Border

Grænsen omslutter indholdet og polstringsområdet. Du kan ændre størrelsen og style grænsen ved hjælp af kantbredde, grænse-stil, og kantfarve ejendomme.

Fjerde lag: Margin

Det sidste lag af boksmodellen bruges i vid udstrækning til at generere mellemrum mellem elementer. Margen omslutter indhold, polstring og kantområde. Du kan bruge margin-top,margin-højre, margin-bund, og margin-venstre ejendomme. Du kan også give ejendommen margin en negativ værdi eller auto for at opnå nogle fantastiske placeringsteknikker.

Projektopsætning til CSS Box -model

Lad os bygge et mini -projekt for at demonstrere den grundlæggende boksmodel med en indholdsboks og egenskaber med polstring, kant og margen. Du kan gå med tekst, billede eller medieindhold. Vi starter med at sikre, at det er korrekt struktureret.

Struktur med HTML

Produktion:

Du kan bruge indbyggede funktioner i din browser, f.eks Chrome -udviklerværktøjer, for at se hvad der foregår. Vi bruger to billeder fra Unsplash. For nemheds skyld skjuler vi smartphone -billedet vha display: ingen; indtil vi har brug for det senere.

Styling ved hjælp af CSS

/*************************
GRUNDLÆGGENDE STIL
*************************/
* {
margen: 0px;
polstring: 0px;
}
krop {
display: flex;
flex-direction: række;
} 
.Skærm {
display: ingen! vigtigt;
}

Lad os nu style vores indholdsboks. Først sætter vi højde og bredde af billedet. Også at give en baggrundsfarve hjælper med bedre visualisering. Så lad os gøre det.

/*************************
INDHOLDSBOKS
*************************/
.content-box {
display: flex;
flex-direction: række;
justify-content: center;
align-items: center;
/ * Styling af indholdsboksen ved hjælp af egenskaber for højde og bredde */
baggrundsfarve: #fdf;
højde: 20em;
bredde: 30em;
}

Giv indhold plads til at trække vejret med polstring

Du kan enten indstille polstringstop, polstring-højre, polstring-bund, og polstring-venstre ejendomme individuelt eller brug stenografien. Prøv at bruge stenografien, hvis det er muligt, da det kan spare dig lidt tid. Lad os se, hvordan polstring fungerer.

 /*************************
PADDING
*************************/
/ * Påføring af polstring */
polstringstop: 5em;
polstring-højre: 2em;
polstring-bund: 8em;
polstring-venstre: 2em;
/ * Polstring stenografi */
/ * top/højre/bund/venstre */
polstring: 5em 2em 8em 2em;
/ * top/vandret/bund */
polstring: 5em 2em 8em;

Produktion:

Tegn linjer rundt om polstring ved hjælp af kant

Sørg for, at du bruger kantfarve egenskab for at give grænsen en tydelig farve fra baggrunden. Du kan vælge grænse-stil enten individuelt eller på én gang ved at bruge stenografi -ejendommen. Det samme gælder for kantbredde ejendom.

Du kan også indstille grænse-radius for at give boksen afrundede hjørner med en radius i px, rem, emeller procent.

 /*************************
GRÆNSE
*************************/
/ * Anvendelse af grænseejendomme */
/ * Indstil kantfarven */
kantfarve: rgb (148, 234, 255);
/ * Vælg kantstil */
border-top-stil: solid;
grænse-højre-stil: stiplet;
kant-bund-stil: rille;
grænse-venstre-stil: højderyg;
/ * stenografi i kantstil */
/ * top/højre/bund/venstre */
kantstil: massiv stiplede rilleryg;
/ * Indstil kantbredde */
kant-top-bredde: 4em;
kant-højre-bredde: 2em;
kant-bund-bredde: 2em;
grænse-venstre-bredde: 2em;
/* grænsebredde stenografi*/
/ * top/højre/bund/venstre */
kantbredde: 4em 2em 2em 2em;
/ * top/vandret/bund */
kantbredde: 4em 2em 2em;
/ * grænseejendom stenografi */
/* kant: 4em solid rgb (148, 234, 255); */
/ * Indstil kant-radius */
grænse-radius: 5em;
grænse-radius: 20%;

Produktion:

Tilføj mellemrum mellem æsker med margen

Du kan centrere en kasse vandret ved hjælp af margen: 0 auto, forudsat at den har en bestemt bredde.

 /*************************
MARGIN
*************************/
/ * Anvendelse af margenegenskaber */
margin-top: 4em;
margin-højre: 5em;
margin-bund: 3em;
margin-venstre: 5em;
/ * Margen stenografi */
/ * top/højre/bund/venstre */
margen: 4em 5em 3em 5em;
/ * top/vandret/bund */
margen: 4em 5em 3em;
/ * Brug af automargin */
margen: 3em auto;

Produktion:

Du kan angive margenegenskaben ved hjælp af en, to, tre eller fire værdier. Værdierne kan være en længde, procentdel eller et søgeord som auto. Lad os forstå, hvordan det fungerer:

• Når du kun angiver en værdi, betyder det, at alle fire sider har samme margen.
• Når du angiver to værdier, betyder den første værdi margin-top og margin-bund mens den anden værdi angiver margin-højre og margin-venstre.
• Når du angiver tre værdier, gælder den første og den sidste for margin-top og margin-bund henholdsvis. Den midterste værdi er for det vandrette område, dvs. margin-højre og margin-venstre.
• Når du angiver alle fire værdier, gælder de for henholdsvis top, højre, bund og venstre (i rækkefølge med uret).

Bemærk, at du også kan bruge disse genveje til polstring og kantegenskaber.

Se også: Essential CSS3 Properties Cheat Sheet

Har du nogensinde brugt en negativ margin? Lad os slette for at visualisere det display: ingen for at vise vores andet billede, og sæt derefter en negativ margin.

/* .Skærm {
display: ingen! vigtigt;
} */
.content-box {
display: flex;
flex-direction: række;
align-items: center;
baggrundsfarve: #fdf;
højde: 20em;
bredde: 30em;
polstring: 5em 2em 8em;
kantstil: massiv stiplede rilleryg;
kantbredde: 4em 2em 2em;
grænse-radius: 20%;
/ * Brug af negativ margin */
margen: 3em -20em 3em 5em;
}

Produktion:

Box -modellen: Lav et Pixel Perfect -websted

Boksmodellen lader dig definere mellemrum mellem elementer, tilføje kanter og nemt bygge et komplekst layout. Du kan komme i gang med det samme med at oprette et fantastisk websted. I mellemtiden kan du udforske grænseboks ejendom i detaljer og leg med koden ovenfor.

Du bør forstå, at der er andre metoder til layout af indhold i CSS. Disse inkluderer CSS Grid og CSS Flexbox. Når du er fortrolig med boksmodellen, bør du fortsætte med at lære om disse alternativer.

CSS Flexbox Tutorial: The Basics

Placer dine HTML -elementer perfekt ved hjælp af CSS Flexbox.

Læs Næste

Om forfatteren