{"id":91989,"date":"2022-10-12T10:25:37","date_gmt":"2022-10-12T15:25:37","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/css-boxmodellen-forklaras-med-exempel-nyheter-i-android-telefoner-prylar-och-recensioner\/"},"modified":"2022-10-12T10:25:37","modified_gmt":"2022-10-12T15:25:37","slug":"css-boxmodellen-forklaras-med-exempel-nyheter-i-android-telefoner-prylar-och-recensioner","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/css-boxmodellen-forklaras-med-exempel-nyheter-i-android-telefoner-prylar-och-recensioner\/","title":{"rendered":"CSS-boxmodellen f\u00f6rklaras med exempel – Nyheter i Android, Telefoner, Prylar Och Recensioner"},"content":{"rendered":"
\n

Om du planerar att bygga en fantastisk webbsidelayout beh\u00f6ver du veta om marginaler, gr\u00e4nser, utfyllnad och inneh\u00e5ll. Varje element i webbdesign, oavsett om det \u00e4r en bild eller text, anv\u00e4nder en ruta med dessa egenskaper. Du kan enkelt bygga komplexa layouter genom att leka med boxmodellen. I den h\u00e4r artikeln kommer vi att dissekera CSS-boxmodellen och visa dig hur du anv\u00e4nder dessa egenskaper med praktiska exempel.<\/p>\n

<\/span> Vad \u00e4r CSS Box Model?<\/span><\/h2>\n

CSS-boxmodellen \u00e4r en standard skapad av World Wide Web Consortium. Den beskriver alla element i ett HTML-dokument som rektangul\u00e4ra rutor med sina egna m\u00e5tt. Dessa rutor inneh\u00e5ller ett inneh\u00e5llsomr\u00e5de och valfria omgivande marginaler, ramar och utfyllnadsomr\u00e5den. S\u00e5 l\u00e5t oss utforska delarna av en CSS-l\u00e5da.<\/p>\n

L\u00e5t oss avsl\u00f6ja de fyra lagren i CSS-boxmodellen.<\/p>\n

<\/span>F\u00f6rsta lagret: Inneh\u00e5ll<\/span><\/h3>\n

Inneh\u00e5llsomr\u00e5det inneh\u00e5ller huvudinneh\u00e5llet i elementet som kan vara en bild, text eller n\u00e5gon form av medieinneh\u00e5ll. Du kan \u00e4ndra dimensionerna f\u00f6r element p\u00e5 blockniv\u00e5 med hj\u00e4lp av h\u00f6jd<\/strong> och bredd<\/strong> egenskaper.<\/p>\n

<\/span>Andra lagret: Vaddering<\/span><\/h3>\n

Utfyllnad \u00e4r utrymmet mellan inneh\u00e5llsrutan och dess kantruta. \u00c4ven om det sitter runt ditt inneh\u00e5ll som blanksteg, kan du anv\u00e4nda en bakgrundsf\u00e4rg f\u00f6r att visualisera skillnaden. Du kan ans\u00f6ka stoppning-top<\/strong>, stoppning-h\u00f6ger<\/strong>, stoppning-botten<\/strong>, och stoppning-v\u00e4nster<\/strong> egenskaper f\u00f6r att \u00e4ndra utrymmet.<\/p>\n

<\/span>Tredje lagret: Kant<\/span><\/h3>\n

Ramen omsluter inneh\u00e5llet och stoppningsomr\u00e5det. Du kan \u00e4ndra storlek och stil p\u00e5 gr\u00e4nsen med hj\u00e4lp av gr\u00e4nsbredd<\/strong>, border-stil<\/strong>, och gr\u00e4ns f\u00e4rg<\/strong> egenskaper.<\/p>\n

<\/span>Fj\u00e4rde lagret: Marginal<\/span><\/h3>\n

Det sista lagret av boxmodellen anv\u00e4nds ofta f\u00f6r att skapa utrymme mellan elementen. Marginalen omsluter inneh\u00e5llet, stoppningen och kantomr\u00e5det. Du kan anv\u00e4nda marginal-top,<\/strong> marginal-h\u00f6ger<\/strong>, marginal-botten<\/strong>, och marginal-v\u00e4nster<\/strong> egenskaper. Du kan ocks\u00e5 ge marginalegenskapen ett negativt v\u00e4rde eller bil<\/strong> f\u00f6r att uppn\u00e5 n\u00e5gra fantastiska placeringstekniker.<\/p>\n

<\/span> Projektupps\u00e4ttning f\u00f6r CSS Box Model<\/span><\/h2>\n

L\u00e5t oss bygga ett miniprojekt f\u00f6r att demonstrera den grundl\u00e4ggande boxmodellen med en inneh\u00e5llsl\u00e5da och utfyllnads-, kant- och marginalegenskaper. Du kan g\u00e5 med text, bild eller mediainneh\u00e5ll. Vi b\u00f6rjar med att se till att det \u00e4r r\u00e4tt strukturerat.<\/p>\n

<\/span>Struktur med HTML<\/span><\/h3>\n
<!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\u00a0protected]<\/a>;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><\/pre>\n
Produktion:<\/p>\n
\n<\/figure>\n
Du kan anv\u00e4nda inbyggda funktioner i din webbl\u00e4sare, som Chrome Developer Tools, f\u00f6r att se vad som h\u00e4nder.  Vi anv\u00e4nder tv\u00e5 bilder fr\u00e5n Unsplash.  F\u00f6r enkelhetens skull g\u00f6mmer vi smartphone-bilden med hj\u00e4lp av display: ingen;<\/strong> tills vi beh\u00f6ver det senare.<\/p>\n
<\/span>Styling med CSS<\/span><\/h3>\n
\/*************************BASIC STYLING*************************\/* {margin: 0px;padding: 0px;}body {display: flex;flex-direction: row;} .display {display: none !important;}<\/pre>\n
L\u00e5t oss nu styla v\u00e5r inneh\u00e5llsl\u00e5da.  F\u00f6rst st\u00e4ller vi in h\u00f6jd<\/strong> och bredd<\/strong> av bilden.  Att ge en bakgrundsf\u00e4rg hj\u00e4lper ocks\u00e5 till b\u00e4ttre visualisering.  S\u00e5, l\u00e5t oss g\u00f6ra det.<\/p>\n
\/*************************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;}<\/pre>\n
<\/span>  Ge inneh\u00e5llet utrymme att andas med vaddering<\/span><\/h2>\n
Du kan antingen st\u00e4lla in stoppning-top<\/strong>, stoppning-h\u00f6ger<\/strong>, stoppning-botten<\/strong>, och stoppning-v\u00e4nster<\/strong> egenskaper individuellt eller anv\u00e4nd stenografin.  F\u00f6rs\u00f6k att anv\u00e4nda stenografin om m\u00f6jligt, eftersom det kan spara lite tid.  L\u00e5t oss se hur stoppning fungerar.<\/p>\n
 \/*************************PADDING*************************\/\/* Applying padding *\/padding-top: 5em;padding-right: 2em;padding-bottom: 8em;padding-left: 2em;
\/* Padding shorthand *\/<\/p>
\/* top\/right\/bottom\/left *\/padding: 5em 2em 8em 2em;<\/p>
\/* top\/horizontal\/bottom *\/padding: 5em 2em 8em;<\/p><\/pre>\n
Produktion:<\/p>\n
\n<\/figure>\n
<\/span>  Rita linjer runt stoppning med hj\u00e4lp av kant<\/span><\/h2>\n
N\u00e4r du till\u00e4mpar gr\u00e4nsegenskapen, se till att du anv\u00e4nder gr\u00e4ns f\u00e4rg<\/strong> egenskap f\u00f6r att ge kanten en distinkt f\u00e4rg fr\u00e5n bakgrunden.  Du kan v\u00e4lja border-stil<\/strong> antingen individuellt eller p\u00e5 en g\u00e5ng genom att anv\u00e4nda stenografiegenskapen.  Detsamma g\u00e4ller f\u00f6r gr\u00e4nsbredd<\/strong> fast egendom.<\/p>\n
Du kan ocks\u00e5 st\u00e4lla in gr\u00e4nsradie<\/strong> f\u00f6r att ge l\u00e5dan rundade h\u00f6rn med en radie in px<\/strong>, rem<\/strong>, em<\/strong>, eller procent.<\/p>\n
 \/*************************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;<\/p>
\/* Set border width *\/border-top-width: 4em;border-right-width: 2em;border-bottom-width: 2em;border-left-width: 2em;<\/p>
\/* border-width shorthand*\/\/* top\/right\/bottom\/left *\/border-width: 4em 2em 2em 2em;<\/p>
\/* top\/horizontal\/bottom *\/border-width: 4em 2em 2em;<\/p>
\/* border property shorthand *\/\/* border: 4em solid rgb(148, 234, 255); *\/<\/p>
\/* Set border-radius *\/border-radius: 5em;border-radius: 20%;<\/p><\/pre>\n
Produktion:<\/p>\n
\n<\/figure>\n
<\/span>  L\u00e4gg till utrymme mellan l\u00e5dor med marginal<\/span><\/h2>\n
Du kan centrera en l\u00e5da horisontellt med hj\u00e4lp av marginal: 0 auto<\/strong>, f\u00f6rutsatt att den har en best\u00e4md bredd.<\/p>\n
 \/*************************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;<\/p>
\/* Using auto margin *\/margin: 3em auto;<\/p><\/pre>\n
Produktion:<\/p>\n
\n<\/figure>\n
Du kan ange marginalegenskapen med ett, tv\u00e5, tre eller fyra v\u00e4rden.  V\u00e4rdena kan vara en l\u00e4ngd, en procentandel eller ett s\u00f6kord som bil<\/strong>.  L\u00e5t oss f\u00f6rst\u00e5 hur det fungerar:<\/p>\n
  N\u00e4r du bara anger ett v\u00e4rde betyder det att alla fyra sidorna har samma marginal.  N\u00e4r du anger tv\u00e5 v\u00e4rden betyder det f\u00f6rsta v\u00e4rdet marginal-top<\/strong> och marginal-botten<\/strong> medan det andra v\u00e4rdet anger marginal-h\u00f6ger<\/strong> och marginal-v\u00e4nster<\/strong>.  N\u00e4r du anger tre v\u00e4rden g\u00e4ller det f\u00f6rsta och sista marginal-top<\/strong> och marginal-botten<\/strong> respektive.  Det mellersta v\u00e4rdet \u00e4r f\u00f6r det horisontella omr\u00e5det, dvs. marginal-h\u00f6ger<\/strong> och marginal-v\u00e4nster<\/strong>.  N\u00e4r du anger alla fyra v\u00e4rdena g\u00e4ller de \u00f6verst, h\u00f6ger, botten och v\u00e4nster (i medurs ordning).  <\/p>\n
Observera att du \u00e4ven kan anv\u00e4nda dessa genv\u00e4gar f\u00f6r utfyllnad och kantegenskaper.<\/p>\n
Har du n\u00e5gonsin anv\u00e4nt en negativ marginal?  F\u00f6r att visualisera det l\u00e5t oss radera display: ingen<\/strong> f\u00f6r att visa v\u00e5r andra bild, st\u00e4ll sedan in en negativ marginal.<\/p>\n
\/* .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;}<\/p><\/pre>\n
Produktion:<\/p>\n
\n<\/figure>\n
<\/span>  The Box Model: Att g\u00f6ra en Pixel Perfect Webbplats<\/span><\/h2>\n
Boxmodellen l\u00e5ter dig definiera utrymme mellan element, l\u00e4gga till kanter och enkelt bygga en komplex layout.  Du kan komma ig\u00e5ng direkt f\u00f6r att skapa en fantastisk webbplats.  Under tiden kan du utforska border-box<\/strong> egenskap i detalj och lek med koden ovan.<\/p>\n
Du b\u00f6r f\u00f6rst\u00e5 att det finns andra metoder f\u00f6r att l\u00e4gga ut inneh\u00e5ll i CSS.  Dessa inkluderar CSS Grid och CSS Flexbox.  N\u00e4r du \u00e4r bekv\u00e4m med boxmodellen b\u00f6r du forts\u00e4tta l\u00e4ra dig om dessa alternativ.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Naincy Mourya (19 artiklar publicerade)
<\/strong><\/p>\n
Naincy \u00e4r specialiserat p\u00e5 att bygga mycket responsiva webbplatser och effektiv inneh\u00e5llsstrategi tillsammans med webbkopior.  Hon \u00e4r en frilansande teknikskribent som h\u00e5ller ett skarpt \u00f6ga p\u00e5 trendteknologi.<\/p>\n
                            Mer fr\u00e5n Naincy Mourya<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n