Lecția 10: Modelul Cutiei (Box) în CSS

by

Overview:

În această lecție, vom explora Modelul Cutiei (Box Model) în CSS, un concept esențial pentru înțelegerea și controlul layout-ului și al aspectului elementelor HTML.

Key Concepts:

  1. Componente ale Modelului Cutiei:
    • Conținut (Content): Reprezintă conținutul elementului, cum ar fi textul sau imaginea.
    • Padding: Spațiul între conținut și border.
    • Border: Linia care delimitează conținutul și padding-ul.
    • Margin: Spațiul între border și alte elemente vecine.
  2. Calcularea Dimensiunilor Totale:
    • Lățimea totală a unui element este suma conținutului, padding-ului, border-ului și margin-ului.
    • Formula: width = content + padding + border + margin.
  3. Proprietăți CSS asociate Modelului Cutiei:
    • width: Stabilește lățimea conținutului elementului.
    • height: Stabilește înălțimea conținutului elementului.
    • padding: Setează spațiul între conținut și border.
    • border: Stabilește caracteristicile liniei de border.
    • margin: Stabilește spațiul între border și elementele vecine.

Detailed Examples:

1. Definirea Marginelor și Padding-ului:
/* Stilizare pentru un div cu margin și padding */
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #ccc;
}
2. Utilizarea Calculelor pentru Dimensiuni:
/* Stilizare pentru o cutie cu dimensiuni calculate */
.calculator {
  width: calc(100% - 40px); /* 100% minus 2 * padding (20px * 2) */
  height: 150px;
  padding: 20px;
  border: 1px solid #999;
}

Exercițiul Practic: CSS – Modelul Cutiei

Task:

  1. Creați o pagină HTML simplă care să conțină cel puțin două elemente cu dimensiuni specifice și stilizate utilizând Modelul Cutiei.
  2. Utilizați CSS pentru a adăuga margin, padding și border la aceste elemente și pentru a experimenta cu calculele de dimensiuni.

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lecția 10 - CSS Modelul Cutiei</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: CSS - Modelul Cutiei</h1>

  <div class="box">
    <p>Acesta este un element cu Modelul Cutiei aplicat.</p>
  </div>

  <div class="calculator">
    <p>Acesta este un alt element cu dimensiuni calculate.</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare pentru un div cu margin și padding */
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #ccc;
}

/* Stilizare pentru o cutie cu dimensiuni calculate */
.calculator {
  width: calc(100% - 40px); /* 100% minus 2 * padding (20px * 2) */
  height: 150px;
  padding: 20px;
  border: 1px solid #999;
}