Indholdsfortegnelse
Boksmodellen i CSS beskriver de kasser, der genereres fra HTML -elementer. Kasseskabelonen indeholder også detaljerede muligheder for indstilling af margener, kanter, polstring og indhold for hvert element. Følgende billede viser, hvordan boksmodellen er bygget.Boksmodellen eller "boksmodellen" er helt sikkert det vigtigste element i CSS -stilarkets sprog, da det betinger udformningen af alle websider. Boksmodellen er CSS's adfærd, der får alle elementer på siderne til at blive repræsenteret af rektangulære bokse.
Kasser på én side oprettes automatisk. Hver gang der indsættes et HTML -tag, oprettes en ny rektangulær boks, der omslutter indholdet af elementet. Følgende billede viser de tre rektangulære bokse, der opretter de tre HTML -tags, som siden indeholder.
Der er to typer kasser: blok og inline. Blokelementer bryder layoutflowet. Det vil sige, at de vises alene og indsætter "linjeskift". Inline -elementer følger strømmen og er indeholdt i blokelementer.
For eksempel ville et afsnit være et blokelement (vi kan ikke have et afsnit ved siden af det andet, men to afsnit i en række vises et under det andet. På den anden side er et link et inline -element, da det ikke gør det "klip" teksten, hvor der er.
De dele, der udgør hver boks og deres visningsrækkefølge set fra brugerens synspunkt, er følgende:
Indhold (indhold): det er elementets HTML -indhold (ordene i et afsnit, et billede, teksten i en liste over elementer osv.)
Polstring: Valgfri ledig plads mellem indhold og kant.
Grænse: linje, der helt omslutter indholdet og dets polstring.
Baggrundsbillede: Billedet vises bag indhold og polstringsplads.
Baggrundsfarve: farve vist bag indhold og polstringsrum.
Margen (margen): valgfri adskillelse mellem kassen og de andre tilstødende kasser.
Polstringen og margen er gennemsigtige, så pladsen optaget af polstringen viser baggrundsfarven eller billedet (hvis defineret) og pladsen optaget af margen viser baggrundsfarven eller billedet af din elementforælder (hvis defineret). Hvis intet overordnet element har en baggrundsfarve eller et billede defineret, vises sidens baggrundsfarve eller billede (hvis defineret).
Hvis en boks definerer både en farve og et baggrundsbillede, har billedet højere prioritet og er den, der vises. Men hvis baggrundsbilledet ikke dækker vareboksen helt, eller hvis billedet har gennemsigtige områder, vises baggrundsfarven også. Ved at kombinere transparente billeder og baggrundsfarver kan meget interessante grafiske effekter opnås.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
