TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

CSS -boksmodellopplæring

6

CSS er et utmerket verktøy for frontend webdesign. Populariteten er ikke bare med brukervennligheten, men også med robuste funksjoner. CSS påvirker hvert enkelt element på en webside. Derfor bør alle webdesignere som er kjerneutviklere for enkle layoutdesignere kjenne det grunnleggende i CSS. Boksmodell i CSS er grunnlaget for å definere oppsett og plassering av elementer på en side. I denne artikkelen vil vi utforske det grunnleggende i CSS -boksmodellen i detalj. I tillegg vil vi også dekke hvordan du analyserer elementets boksmodell i en nettleser.



Hva er CSS Box Model?

Når du bruker CSS, anses hvert HTML -element på en webside som en rektangulær boks. Derfor kalles konseptet som boksmodell. Dette hjelper deg med å enkelt definere oppsettet til en webside og plassere elementene for å justere etter behov. I boksmodell er innholdet i et HTML -element plassert i midten og etterfulgt av polstring, kant og margin som vist nedenfor:

CSS -boksmodellopplæring

CSS Box modellelement

  • Margin – dette er området rundt grensen og er alltid gjennomsiktig. Formålet med marginen er å gi nødvendig plass mellom elementene og fra kantene på nettleseren.
  • Border – dette er en synlig linje rundt innholds- og polstringsområdet. Vanligvis brukes det til å gi en kontur til et element og kan ha hvilken som helst farge og bredde.
  • Polstring – mellomrom mellom det faktiske innholdet og grensen kalles polstring. Når innholdet har synlige kantlinjer, er det passende å ha litt polstring. Dette vil bidra til å skape mellomrom mellom innholdet og grensen.
  • Innhold – faktisk innhold som tekst og bilde mellom HTML -tagger.

Relatert: Opplæring i CSS -enheter for nybegynnere.

Eksempel på boksmodellelement

La oss gjøre et enkelt eksempel på å lage et avsnitt i div -tagger for å forklare boksmodellkonseptet. CSS skal se slik ut:

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

Vær oppmerksom på at CSS -koden for margin og polstring inneholder dimensjoner for henholdsvis topp, venstre, bunn og høyre.

Og HTML -koden for å sette inn innholdet med css ovenfor er:

<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>

Utdataene fra koden ovenfor vil se ut som nedenfor i nettleseren. Som nevnt kan ikke marginen sees som den er gjennomsiktig.

CSS -boksmodellopplæring

Visning av CSS -boksmodell for et element i IE 11 -nettleseren

Hvordan sjekker jeg CSS -boksmodell i en nettleser?

Det er en god idé å se teorien på en praktisk måte. Du kan se CSS -boksmodellen for et element rett fra nettleseren din. Her viser vi skjermdumpen med nettleseren Google Chrome. Metoden forblir den samme for alle andre nettlesere som Firefox, Edge og Safari.

  • Åpne en hvilken som helst webside og høyreklikk på elementet du vil utforske.
  • Du kan høyreklikke på hvilken som helst tekst, bilde, video eller tomrom.
  • Velg alternativet "Inspiser element" for å åpne utviklerkonsollen.
  • Den har en venstre rute for visning av HTML og høyre rute for visning av CSS.
  • Du kan se CSS -boksmodellen for det valgte elementet under "Layout" -fanen i høyre rute.
  • Med henvisning til eksempelkoden ovenfor – alle grenser, marginer og polstringer samsvarer med de eksakte dimensjonene som definert i CSS.

Vær oppmerksom på at du kan se HTML -koden for et element i Google Chrome -nettleseren under kategorien "Elementer". Den tilsvarende CSS- og boksmodellen kan sees under kategorien "Stiler" som vist på bildet nedenfor.

CSS -boksmodellopplæring

Viser CSS Box -modell av et element i Chrome -nettleseren

Beregning av bredde og høyde på et element i CSS -boksmodell

Nå som du har forstått begrepet CSS -boksmodell. Når du definerer høyde og bredde på et element, bør den totale bredden og totalhøyden til elementet inkludere margin, polstring og kantbredde. La oss legge til høyde og bredde til CSS -kodeeksemplet ovenfor:

<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>

Relaterte artikler:


Nå skal ethvert element som kaller stilen i CSS-klassen "boksmodell" plasseres med følgende totale bredde og total høyde.

  • Total høyde = høyde + toppmargin + bunnmargin + toppfylling + bunnpolstring + kantbredde = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
  • Total bredde = bredde + venstre marg + høyre marg + venstre polstring + høyre polstring + kantbredde = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

Den komplette sideoppsettet vil bli designet ved å vurdere den totale bredden og den totale høyden på hvert element.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon