CSS
Boxmodellen

Syntax

• box-dimensionering: parameter ;

parametrar

Anmärkningar

Vad är boxmodellen?

Kanterna

Webbläsaren skapar en rektangel för varje element i HTML-dokumentet. Box-modellen beskriver hur utfyllnad, kant och marginal läggs till i innehållet för att skapa denna rektangel.

Diagram från CSS2.2 Working Draft

Omkretsen för vart och ett av de fyra områdena kallas en kant . Varje kant definierar en ruta.

• Den innersta rektangeln är innehållsrutan . Bredden och höjden på detta beror på elementets återgivna innehåll (text, bilder och eventuella underordnade element).
• Därefter är stoppningsrutan , som definieras av padding . Om det inte finns någon padding definierad är stoppningskanten lika med innehållskanten.
• Sedan har vi gränsrutan enligt definitionen i border egendom. Om det inte finns någon border bredd definieras är gränsen kanten lika med stoppning kanten.
• Den yttersta rektangeln är marginalrutan , definierad av margin . Om det inte finns någon margin definierad är marginalkanten lika med kantkanten.

Exempel

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Denna CSS utformar alla div element för att ha en övre, högra, nedre och vänstra kant på 5px i bredd; en övre, högra, nedre och vänstra marginal på 50px ; och en topp, höger, botten och vänster stoppning på 20px . Genom att ignorera innehåll kommer vår genererade ruta att se ut så här:

Skärmdump av Google Chrome Element Styles-panelen

• Eftersom det inte finns något innehåll har innehållsregionen (den blå rutan i mitten) ingen höjd eller bredd (0px med 0px).
• Polstringsrutan är som standard i samma storlek som innehållslådan, plus bredden på 20 pixlar på alla fyra kanter som vi definierar ovan med padding (40px med 40px).
• Gränsen lådan är av samma storlek som stoppningslåda, plus 5px bredden vi definiera ovan med border egenskapen (50px x 50 bildpunkter).
• Slutligen är marginalrutan samma storlek som gränsrutan, plus bredden 50px som vi definierar ovan med margin (vilket ger vårt element en total storlek 150px med 150px).

Låt oss nu ge vårt element ett syskon med samma stil. Webbläsaren tittar på Box-modellen för båda elementen för att räkna ut var i förhållande till det föregående elementets innehåll det nya elementet ska placeras:

Innehållet i var och en av elementen separeras med ett gap på 150px, men de två elementens rutor rör vid varandra.

Om vi sedan modifierar vårt första element så att det inte har någon höger marginal, skulle den högra marginalkanten vara i samma position som den högra gränskanten, och våra två element skulle nu se ut så här:

box-limning

Standard box modell ( content-box ) kan vara krånglig, eftersom width / height för ett element inte kommer att representera sin faktiska bredd eller höjd på skärmen så fort du börja lägga padding och border stilar till elementet.

Följande exempel visar detta potentiella problem med content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Eftersom stoppningen läggs till i bredden på textområdet, är det resulterande elementet ett textområde som är bredare än 100%.

Lyckligtvis tillåter CSS oss att ändra boxmodellen med box-sizing för ett element. Det finns tre olika värden för den tillgängliga egenskapen:

• content-box : Den vanliga rutmodellen - bredd och höjd inkluderar endast innehållet, inte stoppningen eller kanten

• padding-box : Bredd och höjd inkluderar innehållet och stoppningen, men inte gränsen

• border-box : Bredd och höjd inkluderar innehållet, stoppningen såväl som kanten

För att lösa textarea problemet ovan kan du bara ändra egenskapen box-sizing till padding-box eller border-box . border-box används oftast.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Använd följande kod för att tillämpa en specifik ruta-modell på varje element på sidan:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

I den här kodningslådans box-sizing:border-box; tillämpas inte direkt på * , så du kan enkelt skriva över den här egenskapen på enskilda element.