Secció 4: Posicionament CSS

1. El CSS Box Model revisat

1.1. El model de caixes

Ja vàrem introduir el CSS Box Model o 'model de caixes' a la Secció 3, apartats 4.1 a 4.3. Per dominar el posicionament CSS convé tractar alguns aspectes que aleshores vam passar per alt, com les dimensions de les caixes o els diferents tipus de caixa. Abans d'entrar en detalls, fem un breu repàs dels conceptes bàsics del CSS Box Model.

Recordem que cada element HTML genera una caixa rectangular que el navegador s'encarregarà de situar a la pàgina d'acord amb el CSS Box Model. Cadascuna d'aquestes caixes està formada per una àrea de contingut i una àrea envolvent.

A la Secció 3 vàrem estudiar detalladament l'àrea envolvent i totes les propietats que hi estan relacionades (padding, border, margin). Però no vàrem veure quins són els diferents tipus de caixa i de quina manera els representen els navegadors, ni tampoc com afecta el contingut d'un element a la mida de les caixes (tot i que aquest tema es va introduir esquemàticament a l'apartat 4.3: 'Dimensions d'una caixa'). D'això és exactament el que tracten els propers apartats i, tot i que és un contingut més aviat teòric, crec que és necessari per ententre bé el posicionament CSS.