CSS -boxmodellen förklaras med exempel

Om du planerar att bygga en fantastisk webblayout måste du veta om marginaler, gränser, vaddering och innehåll. Varje element i webbdesign, oavsett om det är en bild eller text, använder en ruta med dessa egenskaper. Du kan enkelt bygga komplexa layouter genom att leka med boxmodellen. I den här artikeln kommer vi att dissekera CSS Box -modellen och visa dig hur du använder dessa egenskaper med praktiska exempel.

Vad är CSS Box -modellen?

CSS -boxmodellen är en standard skapad av World Wide Web Consortium. Den beskriver alla element i ett HTML -dokument som rektangulära rutor med egna dimensioner. Dessa rutor innehåller ett innehållsområde och valfria omgivande marginal-, kant- och vadderingsområden. Så, låt oss utforska delarna av en CSS -låda.

Låt oss avslöja de fyra lagren i CSS -boxmodellen.

Första lagret: Innehåll

Innehållsområdet innehåller elementets huvudinnehåll som kan vara en bild, text eller någon form av medieinnehåll. Du kan ändra dimensionerna för blocknivåelement med höjd och bredd egenskaper.

Andra lagret: vaddering

Fyllning är utrymmet mellan innehållsrutan och dess ram. Även om det sitter runt ditt innehåll som blanksteg, kan du använda en bakgrundsfärg för att visualisera skillnaden. Du kan ansöka vadderingstopp, vaddering-höger, vadderingsbotten, och vaddering-vänster egenskaper för att ändra utrymmet.

Tredje skiktet: Border

Gränsen omsluter innehållet och vadderingsområdet. Du kan ändra storlek och styla gränsen med gränsbredd, gränsstil, och gräns färg egenskaper.

Fjärde lagret: Marginal

Det sista lagret i boxmodellen används i stor utsträckning för att generera utrymme mellan element. Marginalen omsluter innehållet, vadderingen och gränsområdet. Du kan använda marginal-topp,marginal-höger, marginal-botten, och marginal-vänster egenskaper. Du kan också ge marginalegenskapen ett negativt värde eller bil för att uppnå några fantastiska placeringstekniker.

Projektinställning för CSS Box -modell

Låt oss bygga ett miniprojekt för att demonstrera den grundläggande boxmodellen med en innehållslåda och vadderings-, kant- och marginalegenskaper. Du kan använda text, bild eller medieinnehåll. Vi börjar med att se till att det är ordentligt uppbyggt.

Struktur med HTML

Produktion:

Du kan använda inbyggda funktioner i din webbläsare, till exempel Utvecklarverktyg för Chrome, för att se vad som händer. Vi använder två bilder från Unsplash. För enkelhetens skull döljer vi smartphonebilden med display: ingen; tills vi behöver det senare.

Styling med hjälp av CSS

/*************************
GRUNDLÄGGANDE STIL
*************************/
* {
marginal: 0px;
vaddering: 0px;
}
kropp {
display: flex;
flex-direction: rad;
} 
.display {
display: ingen! viktig;
}

Låt oss nu utforma vår innehållsruta. Först ställer vi in höjd och bredd av bilden. Att ge en bakgrundsfärg hjälper också till bättre visualisering. Så, låt oss göra det.

/*************************
INNEHÅLLSBOX
*************************/
.content-box {
display: flex;
flex-direction: rad;
justify-content: center;
align-items: center;
/ * Styling av innehållsrutan med egenskaper för höjd och bredd */
bakgrundsfärg: #fdf;
höjd: 20em;
bredd: 30em;
}

Ge innehållet utrymme att andas med vaddering

Du kan antingen ställa in vadderingstopp, vaddering-höger, vadderingsbotten, och vaddering-vänster fastigheter individuellt eller använd stenografin. Försök att använda stenografin om möjligt, eftersom det kan spara lite tid. Låt oss se hur stoppning fungerar.

 /*************************
STOPPNING
*************************/
/ * Applicera vaddering */
vadderingstopp: 5em;
vaddering-höger: 2em;
vadderingsbotten: 8em;
vaddering-vänster: 2em;
/ * Vaddering stenografi */
/ * upp/höger/nedre/vänster */
vaddering: 5em 2em 8em 2em;
/ * topp/horisontell/botten */
vaddering: 5em 2em 8em;

Produktion:

Rita linjer runt vaddering med hjälp av kant

Kontrollera att du använder gräns färg egenskap för att ge gränsen en distinkt färg från bakgrunden. Du kan välja gränsstil antingen individuellt eller på en gång genom att använda egenskapen stenografi. Detsamma gäller för gränsbredd fast egendom.

Du kan också ställa in gränsradie för att ge lådan rundade hörn med en radie in px, rem, emeller procent.

 /*************************
GRÄNS
*************************/
/ * Tillämpa gränsegenskaper */
/ * Ställ in kantfärgen */
kantfärg: rgb (148, 234, 255);
/ * Välj kantstil */
kant-topp-stil: solid;
kant-höger-stil: streckad;
kant-botten-stil: spår;
gräns-vänster-stil: ås;
/ * stenografi i gränsstil */
/ * upp/höger/nedre/vänster */
kantstil: massiv streckad spårrygg;
/ * Ställ in kantbredd */
kant-topp-bredd: 4em;
kant-höger-bredd: 2em;
kant-botten-bredd: 2em;
kant-vänster-bredd: 2em;
/* kantbredd stenografi*/
/ * upp/höger/nedre/vänster */
kantbredd: 4em 2em 2em 2em;
/ * topp/horisontell/botten */
kantbredd: 4em 2em 2em;
/ * gränsfastighets stenografi */
/* kant: 4em fast rgb (148, 234, 255); */
/ * Ställ in gränsradie */
gränsradie: 5em;
gränsradie: 20%;

Produktion:

Lägg till utrymme mellan lådor med marginal

Du kan centrera en låda horisontellt med marginal: 0 auto, förutsatt att den har en bestämd bredd.

 /*************************
MARGINAL
*************************/
/ * Tillämpa marginalegenskaper */
marginal-topp: 4em;
marginal-höger: 5em;
marginal-botten: 3em;
marginal-vänster: 5em;
/ * Marginal stenografi */
/ * upp/höger/nedre/vänster */
marginal: 4em 5em 3em 5em;
/ * topp/horisontell/botten */
marginal: 4em 5em 3em;
/ * Använda automatisk marginal */
marginal: 3em auto;

Produktion:

Du kan ange egenskapen marginal med ett, två, tre eller fyra värden. Värdena kan vara en längd, procent eller ett sökord som bil. Låt oss förstå hur det fungerar:

• När du bara anger ett värde betyder det att alla fyra sidorna har samma marginal.
• När du anger två värden betyder det första värdet marginal-topp och marginal-botten medan det andra värdet anger marginal-höger och marginal-vänster.
• När du anger tre värden gäller det första och det sista för marginal-topp och marginal-botten respektive. Mittvärdet är för det horisontella området, dvs. marginal-höger och marginal-vänster.
• När du anger alla fyra värdena gäller de övre, högra, nedre och vänstra (medurs).

Observera att du också kan använda dessa genvägar för vaddering och kantegenskaper.

Se även: Essential CSS3 Properties Cheat Sheet

Har du någonsin använt en negativ marginal? För att visualisera det låt oss radera display: ingen för att visa vår andra bild, ställ sedan in en negativ marginal.

/* .display {
display: ingen! viktig;
} */
.content-box {
display: flex;
flex-direction: rad;
align-items: center;
bakgrundsfärg: #fdf;
höjd: 20em;
bredd: 30em;
vaddering: 5em 2em 8em;
kantstil: massiv streckad spårrygg;
kantbredd: 4em 2em 2em;
gränsradie: 20%;
/ * Använda negativ marginal */
marginal: 3em -20em 3em 5em;
}

Produktion:

The Box Model: Making a Pixel Perfect Website

Boxmodellen låter dig definiera utrymme mellan element, lägga till ramar och enkelt bygga en komplex utseende. Du kan komma igång direkt för att skapa en fantastisk webbplats. Under tiden kan du utforska gränslåda fastigheten i detalj och leka med koden ovan.

Du bör förstå att det finns andra metoder för att lägga upp innehåll i CSS. Dessa inkluderar CSS Grid och CSS Flexbox. När du är bekväm med boxmodellen bör du fortsätta lära dig om dessa alternativ.

CSS Flexbox -handledning: Grunderna

Placera perfekt dina HTML -element med hjälp av CSS Flexbox.

Läs Nästa

Om författaren