طرح‌بندی CSS - ویژگی display

display این خصوصیت مهم‌ترین خصوصیت CSS برای کنترل چیدمان است.

خصوصیت display

display این属性 مشخص می‌کند که آیا عنصر نمایش داده شود یا چگونه نمایش داده شود.

هر عنصر HTML یک مقدار پیش‌فرض display دارد که بستگی به نوع آن دارد. مقدار پیش‌فرض بیشتر عناصر display block یا inline.

برای نمایش پنل کلیک کنید

این پنل شامل یک عنصر <div> است که به صورت پیش‌فرض پنهان است. (display: none)

این توسط CSS به عنوان استایل تنظیم شده است و ما از JavaScript برای نمایش آن استفاده می‌کنیم. (تغییر به display: block)

عناصر بلوکی (block element)

عناصر بلوکی همیشه از یک خط جدید شروع می‌شوند و تمام فضای موجود را اشغال می‌کنند (به سمت چپ و راست تا جایی که ممکن است گسترش یابند).

این عنصر <div> از عناصر بلوکی است.

مثال‌های عناصر بلوکی:

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

عناصر درون‌خطی (inline element)

عناصر درون‌خطی از شروع یک خط جدید خودداری می‌کنند و تنها فضای مورد نیاز را اشغال می‌کنند.

این یک پاراگراف است،عنصر درون‌خطی <span>.

مثال‌های عناصر درون‌خطی:

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

Display: none;

display: none; معمولاً با JavaScript استفاده می‌شود تا عناصر را مخفی و نمایش داده شود بدون اینکه باید آنها را حذف و دوباره ایجاد کنید. اگر می‌خواهید بدانید چگونه این هدف را به دست آورید، لطفاً به آخرین مثال در این صفحه نگاه کنید.

به صورت پیش‌فرض،<script> عناصر از display: none;.

تغییر مقدار پیش‌فرض Display

همانطور که قبلاً ذکر شد، هر عنصری یک مقدار پیش‌فرض display دارد. اما می‌توانید آن را تغییر دهید.

تغییر عنصر درون‌خطی به عنصر بلوکی و برعکس، برای نمایش صفحه به گونه‌ای خاص در حالی که از استانداردهای وب پیروی می‌شود، بسیار مفید است.

یک مثال رایج برای ایجاد منوهای افقی خطی است. <li> عنصر:

مثال

li {
  display: inline;
}

آموزش شخصی

توجه:تنظیم属性 display عنصر تنها باعث تغییرنحوه نمایش عنصرو بدون تغییر نوع عنصر. بنابراین، با display: block; عناصر درون‌خطی اجازه نمی‌دهند عناصر بلوکی دیگر را در خود جای دهند.

در این مثال، عنصر <span> به عنوان عنصر بلوک نمایش داده می‌شود:

مثال

span {
  display: block;
}

آموزش شخصی

در این مثال، عنصر <a> به عنوان عنصر بلوک نمایش داده می‌شود:

مثال

a {
  display: block;
}

آموزش شخصی

مخفی کردن عنصر - display: none یا visibility: hidden؟

display: none

visibility: hidden

بازنشانی

از طریق display تنظیم شده به عنوان عدم وجود می‌توان عنصر را مخفی کرد. این عنصر مخفی خواهد شد و صفحه به گونه‌ای نمایش داده خواهد شد که انگار این عنصر در آن نیست:

مثال

h1.hidden {
  display: none;
}

آموزش شخصی

visibility: hidden; همچنین می‌توان عنصر را مخفی کرد.

اما، این عنصر همچنان فضای مشابه قبل را اشغال خواهد کرد. عنصر مخفی خواهد شد، اما همچنان بر روی قالب تأثیر خواهد گذاشت:

مثال

h1.hidden {
  visibility: hidden;
}

آموزش شخصی

مثال‌های بیشتر

تفاوت‌های display: none; و visibility: hidden;
این مثال نشان می‌دهد که display: none; در مقابل visibility: hidden;
استفاده ترکیبی از CSS و JavaScript برای نمایش محتوا
این مثال نشان می‌دهد که چگونه می‌توان از CSS و JavaScript برای نمایش عنصر در کلیک استفاده کرد.

ویژگی Display/Visibility CSS

ویژگی توضیح
display تعیین نحوه نمایش عنصر.
visibility تعیین اینکه آیا باید عنصر قابل مشاهده باشد یا خیر.