El model de caixa de CSS és un concepte fonamental en el disseny web que descriu com es disposen i es dimensionen els elements HTML en una pàgina web. Comprendre aquest model és essencial per crear dissenys precisos i coherents.
Components del Model de Caixa
Cada element HTML es representa com una caixa rectangular que consta de les següents parts:
-
Contingut (Content):
- És l'àrea on es col·loca el contingut real, com text, imatges o altres elements.
- La mida del contingut es pot ajustar amb les propietats
width
iheight
.
-
Farcellat (Padding):
- És l'espai entre el contingut i la vora de la caixa.
- Es pot ajustar amb les propietats
padding-top
,padding-right
,padding-bottom
, ipadding-left
. - El farcellat és transparent i no afecta el color de fons de la caixa.
-
Vora (Border):
- És la línia que envolta el contingut i el farcellat.
- Es pot personalitzar amb les propietats
border-width
,border-style
, iborder-color
.
-
Marge (Margin):
- És l'espai fora de la vora que separa la caixa d'altres elements.
- Es pot ajustar amb les propietats
margin-top
,margin-right
,margin-bottom
, imargin-left
. - Els marges poden ser negatius, cosa que pot causar que les caixes es superposin.
Diagrama del Model de Caixa
+---------------------------+ | Marge | | +---------------------+ | | | Vora | | | | +---------------+ | | | | | Farcellat | | | | | | +---------+ | | | | | | | Contingut| | | | | | | +---------+ | | | | | +---------------+ | | | +---------------------+ | +---------------------------+
Exemple Pràctic
Vegem un exemple pràctic de com es pot aplicar el model de caixa en CSS:
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple de Model de Caixa</title> <style> .caixa { width: 200px; height: 100px; padding: 20px; border: 5px solid #000; margin: 10px; background-color: #f0f0f0; } </style> </head> <body> <div class="caixa"> Aquest és el contingut de la caixa. </div> </body> </html>
Explicació del Codi
width: 200px;
iheight: 100px;
: Defineixen la mida del contingut.padding: 20px;
: Afegeix espai entre el contingut i la vora.border: 5px solid #000;
: Afegeix una vora negra de 5 píxels.margin: 10px;
: Afegeix espai fora de la vora, separant la caixa d'altres elements.
Exercici Pràctic
Exercici: Crea una pàgina HTML amb tres caixes de colors diferents. Cada caixa ha de tenir diferents valors de farcellat, vora i marge. Experimenta amb les propietats per veure com afecten el disseny.
Solució:
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercici de Model de Caixa</title> <style> .caixa1 { width: 150px; height: 80px; padding: 10px; border: 3px solid red; margin: 15px; background-color: lightblue; } .caixa2 { width: 180px; height: 90px; padding: 15px; border: 4px dashed green; margin: 20px; background-color: lightgreen; } .caixa3 { width: 200px; height: 100px; padding: 20px; border: 5px dotted blue; margin: 25px; background-color: lightcoral; } </style> </head> <body> <div class="caixa1">Caixa 1</div> <div class="caixa2">Caixa 2</div> <div class="caixa3">Caixa 3</div> </body> </html>
Conclusió
El model de caixa de CSS és essencial per entendre com es disposen els elements en una pàgina web. Dominar aquest concepte et permetrà crear dissenys més precisos i atractius. En el següent tema, explorarem els selectors i l'especificitat de CSS per aplicar estils de manera més eficient.
Curs de Disseny Responsive
Mòdul 1: Introducció al Disseny Responsive
- Què és el Disseny Responsive?
- Història i Importància del Disseny Responsive
- Principis Bàsics del Disseny Responsive
Mòdul 2: Fonaments d'HTML i CSS
Mòdul 3: Media Queries
- Comprensió de les Media Queries
- Ús de les Media Queries en CSS
- Punts de Trencament i Dissenys Responsius