Blok modeli ilə tanışlıq

1.1 Blok modelinin əsasları

Blok modeli, elementlərin veb-səhifədə necə yerləşdiyini və bir-biri ilə necə əlaqədə olduğunu anlamaq üçün əsasdır. Bu model HTML elementlərinin strukturunu və ölçülərini, habelə onların iç boşluqları, sərhədləri və xarici boşluqlar ilə necə əhatə olunduğunu təyin edir.

Blok modelinin əsasları

CSS blok modeli HTML elementlərinin bloklarının tərkibini təsvir edir. Hər bir element dörd əsas komponentdən ibarətdir:

• Məzmun (content).
• İç boşluqlar (padding).
• Sərhədlər (border).
• Xarici boşluqlar (margin).

Bu komponentlər elementin necə göstəriləcəyini və səhifədə digər elementlərlə necə əlaqədə olacağını təyin edir.

Məzmun (Content)

Məzmun (content) — elementin əsas hissəsidir, burada mətn, şəkillər və ya başqa daxil edilmiş elementlər yerləşir. Məzmunun ölçüləri width və height xüsusiyyətləri vasitəsilə açıq şəkildə təyin edilə bilər və ya elementin daxili məzmunundan asılı ola bilər.

İstifadə nümunəsi

Bu nümunədə .content elementinin məzmununa "Bu elementin məzmunudur." mətni daxildir:

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Bu elementin məzmunudur.
      </div>
    
  

1.2 Blok modelinin vizuallaşdırılması

Blok modelində hər bir elementi aşağıdakı hissələrdən ibarət düzbucaqlı blok kimi təsvir etmək olar:

• Məzmun (Content): elementin daxili məzmunu, məsələn, mətn və ya şəkil
• Daxili məsafə (Padding): məzmun ilə elementin sərhədi arasındakı boşluq
• Sərhəd (Border): daxili məsafəni və məzmunu əhatə edən xətt
• Xarici məsafə (Margin): elementin sərhədi ilə qonşu elementlər arasındakı boşluq

Blok modelinin vizuallaşdırılması:

    
      .element {
        width: 200px;           /* Məzmunun eni */
        padding: 10px;          /* Daxili məsafə */
        border: 2px solid red;  /* Sərhəd */
        margin: 20px;           /* Xarici məsafə */
      }
    
  

1.3 Sərhədlər (Border)

Sərhədlər (border) elementin məzmununu və daxili boşluqlarını əhatə edir. Sərhədlərin müxtəlif stilləri, qalınlığı və rəngləri ola bilər. Sərhədlər səhifədəki elementləri vizual olaraq vurğulamaq üçün istifadə edilə bilər.

İstifadə nümunəsi

Bu nümunədə .border elementinə 5 piksel qalınlığında, xəttli və qara rəngdə bir sərhəd tətbiq edilib, hansı ki, məzmunu və daxili boşluqları əhatə edir.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Bu sərhədli elementdir.
      </div>