Model de caixa

El navegador tracta qualsevol element com una caixa. Tant és si és un paràgraf com una secció, o el propi body.

Les caixes tenen una sèrie de propietats, que haurem de conéixer per a poder modificar-les:

Border

Les caixes estan delimitades per un «border» (vora). Aquesta vora pot ser no visible o visible. Si es visible, podem modificar-ne 3 propietats:

• border-width (gruix)
• border-style (solid, dotted, dashed,…)
• border-color

Margin

Les caixes tenen un espai exterior que les separa entre elles (margin)

Padding

Les caixes tenen un espai intern entre els límits (el border) i el contingut (el text o altres caixes). Aquest espai intern és el padding

Podem modificar qualsevol d’aquestes propietats en general (canviar tot el marge exterior, o tot el padding interior) o per separat, donant diferents valors a les coordenades superior (top), dreta (right), esquerra (left) o inferior (bottom).

Exemple

Propietats per modificar el padding:

• padding (tot)
• padding-top
• padding-right
• padding-bottom
• padding-left

Border-radius

Per defecte, les caixes tenen un border-radius de 0 píxels. Podem arrodonir les cantonades fent servir la propietat border-radius. Si la caixa té un color de fons o té una vora visible i fem els cantos arrodonits, ho veurem. Evidentment, si la caixa té el fons blanc o transparent i està sobre un fons blanc, no veurem els cantos arrodonits.

Background

Una altra propietat de les caixes és el fons. Podem modificar el fons amb un color (background-color), amb una imatge (background-image) o les dues coses.

Tipus de display

Hem fet l’exercici de donar un color de fons a diferents elements (paràgrafs, articles, seccions,…) i podem veure que hi ha 2 grans grups d’elements:

• Aquells que van de banda a banda i estan separats del següent element verticalment (es col·loquen un a sota l’altra)
• Aquells que només ocupen l’espai mínim per a visualitzar-ne el contingut

Per tant, podem dir que:

• Els elements que van de banda a banda són del tipus block
• Els que només ocupen l’espai mínim són del tipus inline

Per defecte, les imatges i els enllaços són del tipus inline. Els paràgrafs, h1, h2,.. són del tipus block

Amb CSS podem eliminar el display d’un element, donant-li el valor «none» (cap).
Els elements amb el tipus de display «none» desapareixen del navegador. És important tenir en compte, però, que no desapareixen del HTML

Tipus de visibilitat

Amb CSS també podem modificar la visibilitat d’un element.

• visibility: hidden; fa invisible un element, però el navegador segueix reservant-hi el seu espai
• visibility: visible; fa visible un element

Propietats en procés de standarització

El CSS, com l’HTML, es va revisant de tant en tant. A cada revisió, es decideix quines propietats es converteixen en standard, quines es descarten i quines es posen en període de prova.

Quan un navegador encara no s’ha decidit sobre una propietat, cal posar-li un prefixe al davant per a que aquell navegador la interpreti

Per exemple, amb CSS podem fer transicions entre estats d’un element, però aquestes transicions encara no estan donades per 100% desenvolupades i haurem d’escriure la mateixa propietat vàries vegades, una per cada navegador que necessita veure-la prefixada:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Algunes de les propietats que ja podem fer servir sense prefixe, han tingut prefixe abans, per exemple el border-radius, que fins fa poc s’havia d’escriure així:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-border--radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 

Box sizing

Hi ha dues maneres d’establir la mida d’una caixa.

Per la majoria de navegadors, l’amplada i l’alçada d’un element és fruit de la suma de l’amplada/alçada del contingut (o forçada per CSS amb les propietats width i height), del padding i del border:

width + padding + border = espai horitzontal que ocupa una caixa
height + padding + border = espai vertical que ocupa una caixa

Això significa que si la caixa té border o padding, l’amplada final no es correspondrà amb l’amplada establerta amb la propietat width,

Podem dir que els navegadors treballen de manera diferent a l’hora de dimensionar les caixes, a l’hora de fer el box sizing (box-sizing).

• content-box: és el sistema per defecte, on els marges i la vora es sumen
• border-box: permet que el padding (no el margin!) i la vora (border) estiguin inclosos al valor definit per l’amplada i l’alçada

*{
 box-sizing border-box; 
}