CSS-də display xüsusiyyətinin əsas mənası nədir və…

display xüsusiyyəti elementin sənəddə necə göstəriləcəyini və digər elementlərlə necə qarşılıqlı əlaqədə olacağını müəyyən edir; bu, layout axınında (layout flow) iştirak edir. Bu, elementin formatlaşdırma blokunun növünü təyin edir.

Əsas dəyərlər:

block: Element blok kimi formatlaşdırılır. O, mövcud genişliyin bütününü tutur, yeni sətirdə başlayır və ölçüləri (width, height) təyin oluna bilər.
inline: Element inline kimi formatlaşdırılır. Yeni sətir başlamır, yalnız lazım olan genişliyi tutur və ölçüləri (width, height) təyin oluna bilməz. Şaquli kənar boşluqlar (margin-top, margin-bottom) və daxili boşluqlar (padding-top, padding-bottom) ətrafdakı elementlərə təsir etmir.
inline-block: Element inline kimi formatlaşdırılır, lakin blok kimi davranır. Yeni sətir başlamır, ölçüləri (width, height) və kənar boşluqları və daxili boşluqları ola bilər, bu da ətrafdakı elementlərə təsir edir.
none: Element və onun məzmunu göstərilmir. Element tamamilə sənəd axımından çıxarılır və yer tutmur.
flex: Element Flex konteynerinə çevrilir və onun birbaşa törəmələri Flex elementləri olur. Elastik düzənlər yaratmaq üçün istifadə olunur.
grid: Element Grid konteynerinə çevrilir. Şəbəkəyə əsaslanan düzənlər yaratmaq üçün istifadə olunur.

İş prinsipi:

Brauzer display dəyərindən istifadə edərək elementin yerləşdiyi formatlaşdırma kontekstinin növünü müəyyən edir. Bu, aşağıdakıları təsir edir:

Sənəd axımı: Elementin qonşularına nisbətən necə yerləşdirildiyi.
Elementin ölçüləri: Genişlik və hündürlüyü təyin etmək və məzmunun ölçülərə təsiri.
Ətrafdakı elementlərə təsiri: Elementin kənar boşluqları və ölçülərinin digər elementlərin yerləşdirilməsinə necə təsir etdiyi.

Nümunə:

/* display: block olan element */
div {
  display: block;
  width: 100%; /* Bütün genişliyi tutur */
  margin-bottom: 10px; /* Şaquli boşluq yaradır */
}

/* display: inline olan element */
span {
  display: inline;
  /* width və height ignore edilir */
  /* margin-top və margin-bottom ignore edilir */
}

/* display: inline-block olan element */
img {
  display: inline-block;
  width: 100px; /* Genişlik təyin oluna bilər */
  height: 100px; /* Hündürlük təyin oluna bilər */
  margin: 5px; /* Bütün tərəflərdə boşluq yaradır */
}

/* Gizli element */
.hidden {
  display: none;
}

CSS-də display xüsusiyyətinin əsas mənası nədir və necə işləyir?