El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Model de Caixa de CSS

Següent ►
►

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:

  1. 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 i height.

  2. 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, i padding-left.
    • El farcellat és transparent i no afecta el color de fons de la caixa.

  3. Vora (Border):

    • És la línia que envolta el contingut i el farcellat.
    • Es pot personalitzar amb les propietats border-width, border-style, i border-color.

  4. 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, i margin-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; i height: 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.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats