CSS / Display property

Display property

display нь CSS-ийн хамгийн чухал property-уудын нэг юм. Элемент хэрхэн байрших, эргэн тойрны элементтэй хэрхэн харилцах талаар тодорхойлно.

Block элемент

Block элемент нь:

Шинэ мөрнөөс эхэлдэг
Эцэг элементийн бүтэн өргөнийг эзэлдэг
width, height, margin, padding бүгдийг хүлээн авдаг

css

.box {
  display: block;
}

Анхдагч block элементүүд: div, p, h1–h6, ul, ol, li, section, article, header, footer, nav, main, form, table

css

/* Block элемент нь дараагийнхаа өмнө мөр эхэлнэ */
p {
  display: block;
  width: 80%; /* өргөн тохируулж болно */
  margin: 0 auto; /* голлуулж болно */
}

Inline элемент

Inline элемент нь:

Текстийн урсгалд нийцэн байрладаг — шинэ мөр эхлэдэггүй
Зөвхөн агуулгынхаа хэмжээтэй байдаг
width, height хүлээн авдаггүй
Дээд/доод margin нөлөөгүй

css

.highlight {
  display: inline;
  color: #a78bfa;
  font-weight: 600;
}

Анхдагч inline элементүүд: span, a, strong, em, code, img, button, input, label

Inline-block

Inline-block нь хоёуланг нь нэгтгэдэг:

Текстийн урсгалд нийцэн байрладаг (inline шиг)
width, height, margin, padding бүгдийг хүлээн авдаг (block шиг)

css

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  background-color: #1e293b;
  color: #a78bfa;
  font-size: 0.75rem;
  /* width, height тохируулж болно */
}

/* Зэрэгцэн орших товч */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #a78bfa;
  border-radius: 6px;
  color: #a78bfa;
  text-decoration: none;
}

Display: none — нуух

Элементийг бүрмөсөн нуух. Хуудасны layout-д зай эзэлдэггүй — байхгүй юм шиг ажилладаг.

css

.hidden {
  display: none; /* элемент алга болно, зай эзэлдэггүй */
}

/* JavaScript-тэй хослуулах жишээ */
.modal {
  display: none;
}

.modal.is-open {
  display: block; /* нээгдэх үед харуулна */
}

visibility: hidden — харагдахгүй болгох

Элементийг харагдахгүй болгоно — гэхдээ зай эзэлсэн хэвээр байна.

css

.invisible {
  visibility: hidden; /* харагдахгүй, гэхдээ зай эзэлнэ */
}

| | display: none | visibility: hidden | | --------- | ----------------- | ------------------------ | | Харагдах | Үгүй | Үгүй | | Зай эзлэх | Үгүй — алга болно | Тийм — хоосон зай үлдэнэ | | Хүүхэд | Хамт нуугдана | Хамт нуугдана | | Animation | Хүнд | Хялбар |

Анхдагч display утгууд

Хөтөч элемент бүрт анхдагч display утга оноодог:

css

/* Эдгээрийг тусгайлан бичих шаардлагагүй — анхдагчаар тохируулагдсан */
div {
  display: block;
}
p {
  display: block;
}
span {
  display: inline;
}
a {
  display: inline;
}
img {
  display: inline;
} /* гэхдээ replaced element тул өндөр/өргөн хүлээнэ */
button {
  display: inline-block;
}
input {
  display: inline-block;
}

Бусад display утгууд

css

.flex-container {
  display: flex;
} /* Flexbox (11-р хичээл) */
.grid-container {
  display: grid;
} /* Grid (14-р хичээл) */
.table-element {
  display: table;
} /* Хүснэгт хэлбэр */
.list {
  display: list-item;
} /* li-гийн анхдагч */

Практик жишээ

css

/* Навигацийн холбоосыг хэвтээгээр байрлуулах */
nav a {
  display: inline-block;
  padding: 8px 16px;
  color: #94a3b8;
  text-decoration: none;
  border-radius: 6px;
}

nav a:hover {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Зөвхөн гар утасны дэлгэцэнд харуулах */
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none; /* том дэлгэцэнд нуух */
  }
}

/* Dropdown цэс */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px;
}

.dropdown:hover .dropdown-menu {
  display: block; /* hover дээр гарч ирэх */
}

Дараагийн хичээлд:

position property-ийг судална — static, relative, absolute гурвын ялгаа, top/right/bottom/left property хэрхэн ажилладаг, containing block гэж юу болохыг практик жишээгээр авч үзнэ.

← Өмнөх хичээлBorder ба border-radius Дараах хичээл →Position (static, relative, absolute)