TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Handledning för modell i CSS -box

13

CSS är ett utmärkt verktyg för front -end webbdesign. Populariteten är inte bara med användarvänligheten utan också med robusta funktioner. CSS påverkar varje enskilt element på en webbsida. Därför bör alla webbdesigners som är en kärnutvecklare för enkla layoutdesigners känna till grunderna i CSS. Boxmodell i CSS är basen för att definiera layouter och placera element på en sida. I den här artikeln kommer vi att utforska grunderna i CSS -boxmodellen i detalj. Dessutom kommer vi också att täcka hur man analyserar ett elements boxmodell i en webbläsare.



Vad är CSS Box Model?

När du använder CSS betraktas varje HTML -element på en webbsida som en rektangulär ruta. Därför kallas konceptet för boxmodell. Detta hjälper till att enkelt definiera layouten på en webbsida och placera elementen så att de anpassas efter behov. I boxmodell placeras innehållet i ett HTML -element i mitten och följs av vaddering, kant och marginal enligt nedan:

Handledning för modell i CSS -box

CSS Box Model Element

  • Marginal – detta är området runt gränsen och är alltid transparent. Syftet med marginalen är att ge nödvändigt utrymme mellan element och från webbläsarens kanter.
  • Border – detta är en synlig linje runt innehållet och vadderingsområdet. Generellt används det för att ge en kontur till ett element och kan ha valfri färg och bredd.
  • Vaddering – utrymme mellan det faktiska innehållet och gränsen kallas vaddering. När innehållet har synliga kantlinjer är det lämpligt att ha lite stoppning. Detta kommer att bidra till att skapa utrymme mellan innehållet och gränsen.
  • Innehåll – verkligt innehåll som text och bild mellan HTML -taggar.

Relaterat: CSS -enheter handledning för nybörjare.

Exempel på lådmodellelement

Låt oss göra ett enkelt exempel på att skapa ett stycke i div -taggar för att förklara boxmodellkonceptet. CSS bör se ut nedan:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Observera att CSS -koden för marginal och vaddering innehåller mått för topp, vänster, botten och höger.

Och HTML för att infoga innehållet med ovanstående css är:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

Utmatningen av ovanstående kod kommer att se ut nedan i webbläsaren. Som nämnts kan marginalen inte ses eftersom den är transparent.

Handledning för modell i CSS -box

Visa CSS -boxmodell för ett element i IE 11 -webbläsaren

Hur kontrollerar jag CSS Box -modellen i en webbläsare?

Det är en bra idé att se teorin på ett praktiskt sätt. Du kan se CSS -boxmodellen för ett element direkt från din webbläsare. Här visar vi skärmdumpen med webbläsaren Google Chrome. Metoden förblir densamma för alla andra webbläsare som Firefox, Edge och Safari.

  • Öppna en webbsida och högerklicka på det element du vill utforska.
  • Du kan högerklicka på valfri text, bild, video eller tomt utrymme.
  • Välj alternativet "Inspektera element" för att öppna utvecklarkonsolen.
  • Den har en vänster ruta för visning av HTML och höger ruta för visning av CSS.
  • Du kan se CSS -boxmodellen för det valda elementet under fliken "Layout" i den högra rutan.
  • Med hänvisning till ovanstående exempelkod – kommer alla gränser, marginaler och stoppningar att matcha med de exakta måtten som definieras i CSS.

Observera att du kan se HTML -märkning för ett element i Google Chrome -webbläsaren under fliken "Element". Motsvarande CSS och boxmodell kan ses under fliken "Stilar" som visas på bilden nedan.

Handledning för modell i CSS -box

Visa CSS Box -modell av ett element i Chrome -webbläsaren

Beräkna bredd och höjd för ett element i CSS Box -modell

Nu när du har förstått begreppet CSS -boxmodell. När du definierar höjden och bredden på ett element bör den totala bredden och totala höjden för det elementet inkludera marginal, vaddering och kantbredd. Låt oss lägga till höjd och bredd till ovanstående exempel på CSS -kod:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Relaterade artiklar:


Nu ska alla element som kallar stilen i CSS-klassen "box-modell" placeras med följande totala bredd och totala höjd.

  • Totalhöjd = Höjd + Övre marginal + Bottenmarginal + Övre vaddering + Bottenfyllning + Kantbredd = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
  • Total bredd = bredd + vänster marginal + höger marginal + vänster vaddering + höger vaddering + kantbredd = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

Den fullständiga sidlayouten kommer att utformas med tanke på den totala bredden och den totala höjddimensionen för varje element.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer