Model de caixes

Cal imaginar tots els elements presents en un document HTML com a caixes rectangulars contingudes unes dins d’unes altres. La caixa més gran de totes i que conté a les altres serà body.

Cada vegada que s’insereix una etiqueta HTML es crea una nova caixa que, en principi, serà invisible. Les parts que composen cada caixa seràn les següents:

  • Contingut (content): És el contingut de l’element (un text, una imatge, els elements d’una llista, etc.)

  • Farciment (padding): És l’espai lliure entre el contingut i la vora.

  • Vora (border): És una línia (pot tenir un nombre variable de píxels d’amplaria) que envolta el contingut i el farciment.

  • Marge (margin): És la distància estre la caixa i les caixes adjacents.

Hi ha altres dos parts que es mostren per darrere del farciment i el contingut:

  • La imatge de fons (background image): Si es defineix mostra per darrere del contingut i el farciment.

  • El color de fons (background color): Es mostra per darrere del contingut, el farciment i la imatge de fons.

Si es defineixen tant la imatge com el color de fons la imatge té prioritat, ja que es mostra per davant. Així i tot si la imatge no omple totalment la caixa o té parts transparents es vorà també el color de fons.

_images/model_caixa_html.svg

Amplaria i alçaria de les caixes

L’amplaria i l’alçaria d’una caixa es refereixen al únicament al contingut. Si definim l’amplaria d’una caixa en, per exemple, 100 píxels l’espai ocupat horitzontalment per aquesta será la suma d’aquestos 100 píxels més el seu marge esquerre, la vora esquerra, el pading esquerre, el padding dret, la vora dreta, i el marge dret.

Estils aplicables a les caixes

Els atributs de les caixes del nostre document HTML poden ser modificats mitjançant regles CSS. A continuació tens una col·lecció de atributs que pots modificar.

background-color

Igual que el color, però podrem canviar el color de fons.

body {
background-color: #F7BECD;
}

p {
background-color: rgba(247,190,336,0.8);
}

background-image

Podem utilitzar una imatge com a fons, indicant la seua url com en l’exemple següent, on s’utilitza una imatge com a fons dels paràgrafs.

p {
background-image: url(fons.png);
}

background-repeat

També podem modificar la repetició de la imatge per cobrir el fons amb background-repeat (que pot prendre els valors repeat, no-repeat, repeat-x, repeat-y)

body {
background-repeat: no-repeat;
}

background-position

La posició de la imatge de fons es controla amb background-position, que pot ser expressada com una distància o un percentatge (des del cantó superior esquerre de la pàgina) o amb expressions com top, bottom, left, right o center.

body {
background-position: center;
}

background-size

Aquesta propietat controla la grandària de la imatge de fons, a qual podem expressar amb dos valors (amplada i alçada) de longitud o percentatges.

body {
background-size: 80%;
}

background

Podem expressar totes les propietats d’una vegada amb background. Observa les dues regles següents, el resultat de les quals és idèntic.

body {
background-color: #3355AA;
background-image: url(fons.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

body {
background: #3355AA url(fons.jpg) no-repeat bottom right;
}

background amb múltiples imatges

Podem utilitzar diferents imatges per al fons d’un element HTML. Per fer-ho utilitzarem un únic atribut background i separarem amb comes les diferents imatges que aparexeràn com a diferents capes. En cada capa odrem definir la url, posició des de l’esquerra, posició des de dalt i tipus de repetició.

Per exemple, amb les següents imatges i el codi d’exemple es pot aconseguir la composició que aparèix a continuació.

_images/mario.png _images/nubol.png _images/planta.png _images/plataforma.png _images/terra.png 
background: url(nubol.png) 20px 100px repeat-x,
                    url(terra.png) left bottom repeat-x,
                    url(planta.png) 0px 395px repeat-x,
                    url(mario.png) 480px 320px no-repeat,
                    url(plataforma.png) 0px 250px repeat-x;
background-color: #28AFFA;
_images/background_multiple.png

margin i padding

Amb margin i padding podem canviar l’espai que hi haurà entre aquest element i els elements del voltant (margin) i entre la vora i el contingut de l’element (padding). Observa la imatge següent.

_images/model_caixa_html.png

Nota

Hi ha molts atributs que es poden escriure de forma separada, i generalment porten un guionet, com margin.

p {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

També es pot escriure únicament amb un valor que afectarà a totes les possibilitats.

p {
margin: 5px;
}

Si els valors son diferents es pot escriure un valor rere l’altre.

p {
margin: 1px 2px 3px 4px;
}

Tria la forma d’escriure les teues regles més clara i cómoda.

border

Característiques de la línia al voltant del element. Podem definir-les una a una amb selectors com border-top.

Es pot canviar l’amplaria (border-width), el color (border-color) i l’estil (border-style). L’estil duna línia pot ser un d’entre els següents: none, hidden, dotted, dashed, solid, double, groove, ridge, inset i outset.

També es poden definir totes les característiques d’una vegada:

border: 1px solid black;

border-radius

Fa que les vores de la caixa que conté l’element apareguen arrodonides. Es pot utilitzar una mesura en píxels o percentatge.

h3 {
    border-radius: 12%;
}

box-shadow

Afegeix una ombra a la caixa que conté l’element. Cal indicar, per ordre, les mesures del desplaçament a la dreta, el desplaçament cap a baix, grandaria de l’ombra i color.

h3 {
    box-shadow: 5px 5px 0px #888888;
}

width

Amplària de l’element. Podem, per exemple, donar un valor en píxels o un percentatge, que es referirà a l’amplària del element que continga a aquest.

p {
width: 50%;
}

height

Alçaria de l’element. El seu valor es defineix igual que l’amplària.

h2 {
height: 60px;
}