Om du planerar att bygga en fantastisk webbsidelayout behöver du veta om marginaler, gränser, utfyllnad 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-boxmodellen och visa dig hur du använder dessa egenskaper med praktiska exempel.
Vad är CSS Box Model?
CSS-boxmodellen är en standard skapad av World Wide Web Consortium. Den beskriver alla element i ett HTML-dokument som rektangulära rutor med sina egna mått. Dessa rutor innehåller ett innehållsområde och valfria omgivande marginaler, ramar och utfyllnadsområ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 huvudinnehållet i elementet som kan vara en bild, text eller någon form av medieinnehåll. Du kan ändra dimensionerna för element på blocknivå med hjälp av höjd och bredd egenskaper.
Andra lagret: Vaddering
Utfyllnad är utrymmet mellan innehållsrutan och dess kantruta. Ä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 stoppning-top, stoppning-höger, stoppning-botten, och stoppning-vänster egenskaper för att ändra utrymmet.
Tredje lagret: Kant
Ramen omsluter innehållet och stoppningsområdet. Du kan ändra storlek och stil på gränsen med hjälp av gränsbredd, border-stil, och gräns färg egenskaper.
Fjärde lagret: Marginal
Det sista lagret av boxmodellen används ofta för att skapa utrymme mellan elementen. Marginalen omsluter innehållet, stoppningen och kantområdet. Du kan använda marginal-top, 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.
Projektuppsättning för CSS Box Model
Låt oss bygga ett miniprojekt för att demonstrera den grundläggande boxmodellen med en innehållslåda och utfyllnads-, kant- och marginalegenskaper. Du kan gå med text, bild eller mediainnehåll. Vi börjar med att se till att det är rätt strukturerat.
Struktur med HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected];500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://ipotek.net/css-boxmodellen-forklaras-med-exempel/style.css" />
<title>CSS Box Model</title>
</head>
<body>
<img class="content-box display" src="https://ipotek.net/css-boxmodellen-forklaras-med-exempel/img/second-content-image.jpg" alt="smartphone">
<img class="content-box" src="https://ipotek.net/css-boxmodellen-forklaras-med-exempel/img/content-image.jpg" alt="clock">
</body>
</html>
Produktion:
Du kan använda inbyggda funktioner i din webbläsare, som Chrome Developer Tools, för att se vad som händer. Vi använder två bilder från Unsplash. För enkelhetens skull gömmer vi smartphone-bilden med hjälp av display: ingen; tills vi behöver det senare.
Styling med CSS
/*************************
BASIC STYLING
*************************/
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: row;
}
.display {
display: none !important;
}
Låt oss nu styla vår innehållslåda. 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.
/*************************
CONTENT BOX
*************************/
.content-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* Styling the content box using height and width properties */
background-color: #fdf;
height: 20em;
width: 30em;
}
Ge innehållet utrymme att andas med vaddering
Du kan antingen ställa in stoppning-top, stoppning-höger, stoppning-botten, och stoppning-vänster egenskaper 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.
/*************************
PADDING
*************************/
/* Applying padding */
padding-top: 5em;
padding-right: 2em;
padding-bottom: 8em;
padding-left: 2em;/* Padding shorthand */
/* top/right/bottom/left */
padding: 5em 2em 8em 2em;/* top/horizontal/bottom */
padding: 5em 2em 8em;
Produktion:
Rita linjer runt stoppning med hjälp av kant
När du tillämpar gränsegenskapen, se till att du använder gräns färg egenskap för att ge kanten en distinkt färg från bakgrunden. Du kan välja border-stil antingen individuellt eller på en gång genom att använda stenografiegenskapen. 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, em, eller procent.
/*************************
BORDER
*************************/
/* Applying border properties */
/* Set the border color */
border-color: rgb(148, 234, 255);
/* Select border style */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge;/* border-style shorthand */
/* top/right/bottom/left */
border-style: solid dashed groove ridge;/* Set border width */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;/* border-width shorthand*/
/* top/right/bottom/left */
border-width: 4em 2em 2em 2em;/* top/horizontal/bottom */
border-width: 4em 2em 2em;/* border property shorthand */
/* border: 4em solid rgb(148, 234, 255); *//* Set border-radius */
border-radius: 5em;
border-radius: 20%;
Produktion:
Lägg till utrymme mellan lådor med marginal
Du kan centrera en låda horisontellt med hjälp av marginal: 0 auto, förutsatt att den har en bestämd bredd.
/*************************
MARGIN
*************************/
/* Applying margin properties */
margin-top: 4em;
margin-right: 5em;
margin-bottom: 3em;
margin-left: 5em;/* Margin shorthand */
/* top/right/bottom/left */
margin: 4em 5em 3em 5em;
/* top/horizontal/bottom */
margin: 4em 5em 3em;/* Using auto margin */
margin: 3em auto;
Produktion:
Du kan ange marginalegenskapen med ett, två, tre eller fyra värden. Värdena kan vara en längd, en procentandel 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-top 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 sista marginal-top och marginal-botten respektive. Det mellersta vä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 överst, höger, botten och vänster (i medurs ordning).
Observera att du även kan använda dessa genvägar för utfyllnad och kantegenskaper.
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: none !important;
} */
.content-box {
display: flex;
flex-direction: row;
align-items: center;
background-color: #fdf;
height: 20em;
width: 30em;
padding: 5em 2em 8em;
border-style: solid dashed groove ridge;
border-width: 4em 2em 2em;
border-radius: 20%;/* Using negative margin */
margin: 3em -20em 3em 5em;
}
Produktion:
The Box Model: Att göra en Pixel Perfect Webbplats
Boxmodellen låter dig definiera utrymme mellan element, lägga till kanter och enkelt bygga en komplex layout. Du kan komma igång direkt för att skapa en fantastisk webbplats. Under tiden kan du utforska border-box egenskap i detalj och lek med koden ovan.
Du bör förstå att det finns andra metoder för att lägga ut 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.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
