Innholdsfortegnelse
Boksmodellen i CSS beskriver boksene som genereres fra HTML -elementer. Boksmalen inneholder også detaljerte alternativer for å angi marginer, grenser, polstring og innhold for hvert element. Bildet nedenfor viser hvordan boksmodellen er bygget.Boksmodellen eller "boksmodellen" er sikkert den viktigste funksjonen i CSS -stilarkspråket, siden den betinger utformingen av alle nettsider. Boksmodellen er oppførselen til CSS som får alle elementene på sidene til å bli representert med rektangulære bokser.
En-siders bokser opprettes automatisk. Hver gang en HTML -kode settes inn, opprettes en ny rektangulær boks som omslutter innholdet i elementet. Bildet nedenfor viser de tre rektangulære boksene som lager de tre HTML -taggene som siden inneholder.
Det er to typer bokser: blokk og innebygd. Blokkelementer bryter layoutflyten. Det vil si at de vises alene og setter inn "linjeskift". Inline -elementer følger strømmen og finnes i blokkelementer.
For eksempel vil et avsnitt være et blokkelement (vi kan ikke ha et avsnitt ved siden av det andre, men to avsnitt på rad vil vises ett under det andre. På den annen side er en kobling et innebygd element, siden det ikke gjør det "klippe" teksten der det er.
Delene som utgjør hver boks og deres visningsrekkefølge fra brukerens synspunkt er følgende:
Innhold (innhold): det er HTML -innholdet i elementet (ordene i et avsnitt, et bilde, teksten i en liste med elementer, etc.)
Polstring: Valgfritt ledig mellomrom mellom innhold og kantlinje.
Grense: linje som omslutter innholdet og utfyllingen helt.
Bakgrunnsbilde: Bilde vises bak innhold og polstringsplass.
Bakgrunnsfarge: fargen som vises bak innhold og polstringsplass.
Margin (margin): valgfri separasjon mellom boksen og de andre tilstøtende boksene.
Polstringen og margen er gjennomsiktige, så plassen som opptas av polstringen viser bakgrunnsfargen eller bildet (hvis det er definert) og plassen som er opptatt av margen, viser bakgrunnsfargen eller bildet til elementforelderen din (hvis den er definert). Hvis ingen overordnede elementer har definert en bakgrunnsfarge eller et bilde, vises sidens bakgrunnsfarge eller bilde (hvis definert).
Hvis en boks definerer både en farge og et bakgrunnsbilde, har bildet høyere prioritet og er det som vises. Men hvis bakgrunnsbildet ikke dekker elementboksen helt eller hvis bildet har gjennomsiktige områder, vises også bakgrunnsfargen. Ved å kombinere gjennomsiktige bilder og bakgrunnsfarger kan du oppnå svært interessante grafiske effekter.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
