CSS Dispaly шинж чанар

display шинж чанар нь дэлгэцийн зохион байгуулалтыг хянах хамгийн чухал CSS-н шинж чанар юм.

display шинж чанарт элемент дэлгэцэд хэрхэн харагдах эсэхийг зааж өгнө.
HTML элемент бүр ямар төрлийн элементээс хамаарч анхдагч дэлгэцийн утгатай байдаг. Ихэнх элементийн анхдагч дэлгэцийн утга нь block эсвэл inline утгатай байдаг.

block-level элемент нь үргэлж шинэ мөрнөөс эхэлдэг бөгөөд өргөн зайгаа бүтэн авдаг.

Block-level элементийн жишээнээс

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline элементүүд

HTML Inline-level элемент нь шинэ мөрөнд эхлэхгүй бөгөөд, өөрт шаардлагатай өргөнийг л авдаг байна.

Энэ бол <span> элемент, Inline-д хамаарна

Inline элементийн жишээнээс

• <span>
• <a>
• <img>

Display:none;

display:none; шинж чанар нь элементийг дэлгэцэд үзүүлэх эсвэл нуух үйлдлийг устгалгүйгээр хийх боломжийг олгодог бөгөөд ихэвчлэн JavaScript-н хамт хэрэглэгддэг.

display:none; нь өөрөө анхдагч утга нь юм.

Display-н анхны утгыг өөрчлөх

Дээр дурдсанчлан элемент бүр анхдагч дэлгэцийн утгатай байдаг бөгөөд анхны утгыг та хэрэгсэхгүй болгож болно.

Inline буюу шугаман элементийг блок болгон өөрчилж болно. Эсвэл эсрэгээрээ ч байж болно.

<style>
li {
  display: inline;
}
</style>

Дараах жишээ нь inline төрлийн <span> элементүүдийг блок элемент болгон харуулна.

<style>
span {
  display: block;
}
</style>

Дараах жишээ нь <a> элементүүдийг блок элемент болгон харуулна.

<style>
a {
  display: block;
}
</style>

Элементийг нуух - display:none эвсэл visibility:hidden?

display:none

Устгах

visibility:hidden

Нуух

Reset

Дахин эхлэх

 

Dispaly шинж чанарт none утгыг зааж өгч элементийг нууж болно. Ингэснээр тухайн элемент хуудсанд байгаагүй юм шиг нуугдах болно.

<style>
h1.hideNone {
  display: none;
}
</style>

visibility:hidden; нь бас элементийг нуудаг бөгөөд нуусан ч элементийн зайг хадгалах болно. Өөрөөр хэлбэл элементийг нуусан ч хуудасны зохион байгуулалтад нөлөөлсөөр байх болно.

<style>
h1.hidden {
  visibility: hidden;
}
</style>

Сэтгэгдэлүүд