CSS box model

De Cacauet Wiki
Salta a la navegació Salta a la cerca

El CSS Box Model és el "model de caixes" que gestiona com s'han de mostrar els elements d'una pàgina HTML amb CSS.

Les "caixes" CSS es solen realitzen amb el tag DIV. Qualsevol element HTML/CSS té la seva pròpia caixa (per exemple, P o H1), però el tag DIV és còmode per crear "caixes buides" sense cap propietat a priori, per exemple:

<div id="caixa_gran">
    <div id="caixa_petita">
        Text dintre de la caixa petita <SPAN class="negreta">amb lletra negreta</SPAN> pel mig.
    </div> <!-- tanco caixa gran -->
</div> <!-- tanco caixa petita -->

Tenim 2 caixes, i una (la gran) conté una altra a dins.

Regions d'una caixa

Articles del CSS Box Model al W3CSchools i CSS Box Model en català.

Les regions d'una caixa que cal conèixer són les següents:

Llegeix aquest article per veure-ho en profunditat: http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=2

Modes de bloc i inline

Els modes "bloc" i "inline" es corresponen a la idea que tenim entre els DIV i SPAN, és a dir:

  • Mode block (DIV): ocupa tota l'amplada del contenidor.
  • Mode inline (SPAN): ocupa només el tamany del text.

Pots llegir més:

Qualsevol DIV es pot tornar un SPAN i al revés si canviem la seva propietat display a "block" o "inline". Per exemple:

    P {
         display: inline; /* amb això transformem el bloc "P" a un element "inline" més similar a un SPAN */
    }


Propietats de la caixa

Principals:

Per exemple, en les dues caixes vistes anteriorment (aniuades), podriem fer els tamanys adequats perquè la petita càpiga dintre de la gran:

    #caixa_gran {
        width: 600px;
        height: 600px;
        background-color: yellow;
    }

    #caixa_petita {
        width: 50px;
        height: 50px;
        background-color: cyan;
    }


Altres propietats també importants::

  • Overflow: indica què fer quan el contingut de la caixa sobrepassa a aquesta. Pot ser visible, hidden, scroll, auto i inherit.
    Article sobre overflow a W3CSchools.
  • ...

Alineació d'una caixa en mode normal

Es realitza amb la propietat margin.