Het CSS-boxmodel

Het boxmodel in CSS beschrijft de boxen die worden gegenereerd op basis van HTML-elementen. De doossjabloon bevat ook gedetailleerde opties voor het instellen van marges, randen, opvulling en inhoud voor elk element. De volgende afbeelding laat zien hoe het boxmodel is opgebouwd.
Het boxmodel of "boxmodel" is ongetwijfeld het belangrijkste kenmerk van de CSS-stijlbladtaal, aangezien het het ontwerp van alle webpagina's bepaalt. Het boxmodel is het gedrag van CSS dat ervoor zorgt dat alle elementen op de pagina's worden weergegeven door rechthoekige boxen.
Boxen van één pagina worden automatisch gemaakt. Elke keer dat een HTML-tag wordt ingevoegd, wordt een nieuw rechthoekig vak gemaakt dat de inhoud van dat element omsluit. De volgende afbeelding toont de drie rechthoekige vakken die de drie HTML-tags vormen die de pagina bevat.

In werkelijkheid zijn alle elementen van een website (paragrafen, links, afbeeldingen, tabellen, enz.) rechthoekige vakken. De browsers plaatsen deze vakjes op de manier die we hebben aangegeven om de pagina op te maken.
Er zijn twee soorten dozen: blok en inline. Blokelementen doorbreken de lay-outstroom. Dat wil zeggen, ze verschijnen alleen en voegen "regeleinden" in. Inline-elementen volgen de stroom en zijn opgenomen in blokelementen.
Een alinea zou bijvoorbeeld een blokelement zijn (we kunnen geen alinea naast elkaar hebben, maar twee alinea's achter elkaar verschijnen onder elkaar. Aan de andere kant is een link een inline-element, omdat het niet "knip" de tekst waar het in staat.
De onderdelen waaruit elke doos bestaat en hun weergavevolgorde vanuit het oogpunt van de gebruiker zijn de volgende:
Inhoud (inhoud): het is de HTML-inhoud van het element (de woorden in een alinea, een afbeelding, de tekst in een lijst met elementen, enz.)
Vulling: Optionele vrije ruimte tussen inhoud en rand.
Grens: regel die de inhoud en de opvulling volledig omsluit.
Achtergrond afbeelding: Afbeelding weergegeven achter inhoud en opvulruimte.
Achtergrond kleur: kleur weergegeven achter inhoud en opvulruimte.
Marge (marge): optionele scheiding tussen de doos en de andere aangrenzende dozen.
De opvulling en marge zijn transparant, dus de ruimte die wordt ingenomen door de opvulling toont de achtergrondkleur of afbeelding (indien gedefinieerd) en de ruimte die wordt ingenomen door de marge toont de achtergrondkleur of afbeelding van uw bovenliggende element (indien gedefinieerd). Als er geen bovenliggend element een achtergrondkleur of afbeelding heeft, wordt de achtergrondkleur of afbeelding van de pagina weergegeven (indien gedefinieerd).
Als een kader zowel een kleur- als een achtergrondafbeelding definieert, heeft de afbeelding een hogere prioriteit en wordt deze weergegeven. Als de achtergrondafbeelding de itembox echter niet volledig bedekt of als de afbeelding transparante gebieden heeft, wordt ook de achtergrondkleur weergegeven. Door transparante afbeeldingen en achtergrondkleuren te combineren, kunnen zeer interessante grafische effecten worden bereikt.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven