Innehållsförteckning
Boxmodellen i CSS beskriver rutorna som genereras från HTML -element. Boxmallen innehåller också detaljerade alternativ för att ställa in marginaler, gränser, stoppning och innehåll för varje element. Följande bild visar hur boxmodellen är byggd.Boxmodellen eller "boxmodellen" är säkert det viktigaste inslaget i CSS -stilarkets språk, eftersom det villkorar utformningen av alla webbsidor. Boxmodellen är CSS beteende som gör att alla element på sidorna representeras av rektangulära rutor.
Rutor på en sida skapas automatiskt. Varje gång en HTML -tagg sätts in skapas en ny rektangulär ruta som omsluter innehållet i det elementet. Följande bild visar de tre rektangulära rutorna som skapar de tre HTML -taggar som sidan innehåller.
Det finns två typer av lådor: blockera och infoga. Blockelement bryter layoutflödet. Det vill säga att de visas ensamma och sätter in "radbrytningar". Inline -element följer flödet och finns i blockelement.
Till exempel skulle ett stycke vara ett blockelement (vi kan inte ha ett stycke bredvid det andra, men två stycken i rad visas en under den andra. Å andra sidan är en länk ett infogat element, eftersom det inte gör det "klipp" texten där det finns.
Delarna som utgör varje låda och deras visningsordning från användarens synvinkel är följande:
Innehåll (innehåll): det är elementets HTML -innehåll (orden i ett stycke, en bild, texten i en lista med element, etc.)
Stoppning: Valfritt ledigt utrymme mellan innehåll och kant.
Gräns: rad som helt omsluter innehållet och dess vaddering.
Bakgrundsbild: Bilden visas bakom innehåll och vadderingsutrymme.
Bakgrundsfärg: färg som visas bakom innehåll och vadderingsutrymme.
Marginal (marginal): valfri separation mellan lådan och de andra intilliggande lådorna.
Fyllningen och marginalen är transparenta, så det utrymme som upptas av stoppningen visar bakgrundsfärgen eller bilden (om den är definierad) och det utrymme som upptagits av marginalen visar bakgrundsfärgen eller bilden på din elementförälder (om den är definierad). Om inget överordnat element har en bakgrundsfärg eller bild definierad visas sidans bakgrundsfärg eller bild (om den är definierad).
Om en ruta definierar både en färg och en bakgrundsbild har bilden högre prioritet och är den som visas. Om bakgrundsbilden inte helt täcker objektrutan eller om bilden har genomskinliga områden visas också bakgrundsfärgen. Genom att kombinera transparenta bilder och bakgrundsfärger kan mycket intressanta grafiska effekter uppnås.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
