پرسش خود را بپرسید
١٦,٠٠٠ تومان پاداش این پرسش تعلق گرفت به

فرق ویژگی "visibility" و ویژگی "display"

تاریخ
١ ماه پیش
بازدید
٣٨٠

فرق 

 ویژگی "visibility" و ویژگی "display" 

در طراحی وب و زبان css چیه ؟

٣,٣٢٨
طلایی
٠
نقره‌ای
٠
برنزی
١٨٣

١٠ پاسخ

مرتب سازی بر اساس:

در طراحی وب و زبان CSS، ویژگی‌های visibility و display هر دو برای کنترل نمایش عناصر به‌کار می‌روند، اما تفاوت‌های اساسی دارند:

1. ویژگی visibility:

تعریف: مشخص می‌کند که آیا یک عنصر قابل مشاهده باشد یا نه.

مقادیر رایج:

visible: عنصر قابل مشاهده است (حالت پیش‌فرض).

hidden: عنصر پنهان است اما همچنان در صفحه حضور دارد و فضای خود را اشغال می‌کند.


ویژگی‌ها:

عنصر هنوز در DOM باقی می‌ماند.

فضای اشغال‌شده توسط عنصر حفظ می‌شود.

برای مثال:

.example {
 visibility: hidden;
}

این کد عنصر را از دید مخفی می‌کند، اما فضای آن همچنان در صفحه وجود دارد.


---

2. ویژگی display:

تعریف: مشخص می‌کند که عنصر چگونه در صفحه رندر شود (یا اصلاً رندر نشود).

مقادیر رایج:

block: عنصر به صورت بلوک نمایش داده می‌شود.

inline: عنصر به صورت خطی نمایش داده می‌شود.

none: عنصر به کلی از صفحه حذف می‌شود.


ویژگی‌ها:

اگر مقدار none باشد:

عنصر از DOM حذف نمی‌شود، اما در صفحه نمایش داده نمی‌شود.

فضای آن به کلی حذف می‌شود.


برای مثال:

.example {
 display: none;
}

این کد عنصر را به کلی از صفحه حذف می‌کند.


---

مثال تصویری:

فرض کنید یک پاراگراف با متن دارید:

<p class="example">این یک متن نمونه است.</p>

با visibility: hidden:

متن نمایش داده نمی‌شود.

فضای آن هنوز وجود دارد (مثلاً یک جای خالی در صفحه).


با display: none:

متن نمایش داده نمی‌شود.

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

---

استفاده در عمل:

از visibility برای مخفی کردن موقتی عناصر بدون تغییر چیدمان صفحه استفاده کنید.

از display برای حذف کامل عناصر از چیدمان صفحه استفاده کنید.

تاریخ
٣ هفته پیش
عکس پرسش

https://abadis.ir/bepors/question/26282/#ans-286973

تاریخ
٣ هفته پیش

کلا visibility   را در متون تخصصی فنی برای دیده شدن وداشتن ویژگی که باعث دیده شدن می شود استفاده می‌کنیم    display   رو برای نشان دادن چیزی استفاده می‌کنیم و حتی  ممکن است اصل و خود آن object یا شی در  

Display نشان داده نشود و علامت یا کاراکتری برای نمایش آن شی استفاده شود این تفاوت در نشریات و موارد فنی وجود دارد ولی در مورد طراحی وب و ... اطلاعی ندارم که صدق می کند یا نه؟    

١,٤٨٨
طلایی
٠
نقره‌ای
٨
برنزی
٢٣
تاریخ
٣ هفته پیش

در CSS، ویژگی‌های visibility و display هر دو برای کنترل نمایش عناصر به کار می‌روند، اما رفتار متفاوتی دارند:

۱. display

  • وقتی display: none برای یک عنصر تنظیم شود، عنصر به‌طور کامل از صفحه حذف می‌شود، به‌طوری که فضای آن هم گرفته نمی‌شود و باقی عناصر جابه‌جا می‌شوند.
  • در واقع، انگار که عنصر اصلاً وجود ندارد. این ویژگی برای مخفی کردن کامل عنصر و صرفاً نمایش در مواقع لازم کاربرد دارد.

۲. visibility

  • وقتی visibility: hidden برای یک عنصر تنظیم شود، عنصر از نظر دیداری مخفی می‌شود، اما همچنان فضای آن روی صفحه باقی می‌ماند.
  • سایر عناصر تحت تأثیر مکان عنصر مخفی‌شده هستند و فضا همچنان محفوظ می‌ماند.
  • این ویژگی مناسب است زمانی که می‌خواهیم عنصری دیده نشود، اما فضای آن همچنان حفظ شود.

مقایسه

ویژگی

display: none

visibility: hidden

مخفی‌سازیکاربرد
عنصر کاملاً حذف می‌شودعنصر مخفی می‌شود ولی فضای آن حفظ می‌شود
پنهان کردن کامل بدون تأثیر بر صفحهمخفی کردن ولی حفظ چیدمان صفحه
١٠٥
طلایی
٠
نقره‌ای
٤
برنزی
٠
تاریخ
٤ هفته پیش

در CSS، ویژگی‌های display و visibility هر دو برای کنترل نمایش عناصر در صفحه استفاده می‌شوند، اما تفاوت‌های اساسی دارند. بیایید تفاوت‌ها را دقیق‌تر بررسی کنیم:

1. ویژگی display

ویژگی display نوع نمایش عنصر را در صفحه تنظیم می‌کند و حتی می‌تواند عنصر را کاملاً از صفحه حذف کند.

  • display: none;
    زمانی که از این مقدار استفاده می‌کنید، عنصر به‌طور کامل از صفحه و ساختار (طرح‌بندی) حذف می‌شود. به این معنی که هیچ فضایی برای آن در صفحه در نظر گرفته نمی‌شود و انگار اصلاً وجود ندارد.
  • مثال کاربرد: وقتی می‌خواهید عنصری را به‌طور کامل مخفی کنید تا هم از دید کاربر پنهان باشد و هم فضایی اشغال نکند، مثل مخفی‌سازی منوها یا محتوای اضافی که فقط در شرایط خاصی نمایش داده می‌شوند.
  • 2. ویژگی visibility

    ویژگی visibility مشخص می‌کند که عنصر قابل مشاهده باشد یا خیر، اما برخلاف display فضای عنصر را در صفحه حفظ می‌کند.

  • visibility: hidden;
    این مقدار، عنصر را نامرئی می‌کند ولی همچنان فضای آن را در صفحه نگه می‌دارد. یعنی، اگر عنصری را مخفی کنید، موقعیت و اندازه آن باقی می‌ماند و فضای صفحه را اشغال می‌کند.
  • مثال کاربرد: زمانی که می‌خواهید عنصر را به‌صورت موقت از دید پنهان کنید، ولی نمی‌خواهید ساختار صفحه تغییر کند.
  • تفاوت‌های اصلی

    حذف عنصرفضای عنصراستفاده در انیمیشنمناسب برای
    ویژگیdisplay: nonevisibility: hidden
    عنصر به‌طور کامل از صفحه و طرح‌بندی حذف می‌شودعنصر نامرئی می‌شود ولی فضای خود را حفظ می‌کند
    فضایی در صفحه اشغال نمی‌کندفضای خود را در صفحه حفظ می‌کند
    به دلیل حذف کامل عنصر، برای تغییرات انیمیشنی مناسب نیستبرای تغییرات دیداری در انیمیشن‌ها مناسب‌تر است
    پنهان‌سازی کامل عناصر (مثل منوها یا بخش‌های مخفی)پنهان کردن موقت عناصر بدون تغییر در ساختار صفحه
    تاریخ
    ٤ هفته پیش
    • visibility: hidden عنصر را مخفی می‌کند اما فضای آن را حفظ می‌کند.
    • display: none عنصر را مخفی می‌کند و فضایی که اشغال کرده بود را نیز حذف می‌کند.

    این دو ویژگی می‌توانند به طور مستقل یا همزمان در طراحی صفحات وب استفاده شوند تا به طراحی دلخواه برسید.

    ٣٧٣
    طلایی
    ٠
    نقره‌ای
    ٦
    برنزی
    ٦
    تاریخ
    ١ ماه پیش
    ویژگی "visibility"

    تعریف: visibility تعیین می‌کند که آیا یک عنصر قابل دیدن باشد یا خیر، بدون تغییر در نحوه اشغال فضای آن عنصر در صفحه.

    مقدارهای ممکن:

    • visible: عنصر قابل دیدن است.
    • hidden: عنصر قابل دیدن نیست، اما فضای آن همچنان در صفحه محفوظ است.

    👇مثال:

    عکس اول

    در این مثال، عنصر با کلاس .hidden-element قابل دیدن نیست، اما فضایی که اشغال کرده همچنان در صفحه باقی می‌ماند.

    ویژگی "display"

    تعریف: display نحوه نمایش یک عنصر در صفحه را تعیین می‌کند. این ویژگی می‌تواند به کلی نحوه نمایش و اشغال فضای عنصر را تغییر دهد.

    مقدارهای ممکن:

    • block: عنصر به صورت بلوکی نمایش داده می‌شود و فضای کل خط را اشغال می‌کند.
    • inline: عنصر به صورت خطی نمایش داده می‌شود و تنها فضای محتوای خود را اشغال می‌کند.
    • none: عنصر به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

    👇مثال:

    عکس دوم

    در این مثال، عنصر با کلاس .hidden-element به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

    مقایسه

    • visibility: hidden: عنصر قابل دیدن نیست، اما فضای آن همچنان اشغال شده باقی می‌ماند.
    • display: none: عنصر به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

    کاربردها

    visibility: hidden:

  • استفاده وقتی که می‌خواهید عنصری را موقتاً پنهان کنید بدون تغییر در ساختار کلی صفحه.
  • display: none:

  • استفاده وقتی که می‌خواهید عنصری را به کلی از صفحه حذف کنید و فضای آن را آزاد کنید.
  • مثال کاربردی

    فرض کنید دو عنصر داریم که یکی باید موقتاً پنهان شود و دیگری به کلی از صفحه حذف شود:

    عکس سوم

    در این مثال، عنصر اول فضای خود را حفظ می‌کند اما قابل دیدن نیست. عنصر دوم به کلی از صفحه حذف می‌شود و هیچ فضایی اشغال نمی‌کند.

    ٤٠٨,٧٤٣
    طلایی
    ٣٣٠
    نقره‌ای
    ٤,٥٨٠
    برنزی
    ٢,٨٠٨
    تاریخ
    ١ ماه پیش
    عکس پرسش
    عکس پرسش
    عکس پرسش

    تفاوت بین ویژگی‌های visibility و display در CSS

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

    ویژگی visibility

    • تعریف: این ویژگی مشخص می‌کند که یک عنصر قابل مشاهده باشد یا خیر. به عبارت دیگر، تعیین می‌کند که آیا عنصر در صفحه رندر می‌شود یا نه.
    • مقادیر اصلی:
      • visible: عنصر به طور کامل نمایش داده می‌شود (مقدار پیش‌فرض).
      • hidden: عنصر پنهان می‌شود، اما فضایی که در صفحه اشغال می‌کرد، همچنان حفظ می‌شود. یعنی عناصر دیگر نمی‌توانند جایگزین آن شوند.
    • کاربردها:
      • پنهان کردن موقت یک عنصر بدون تغییر در ساختار صفحه.
      • ایجاد افکت‌های انیمیشنی که در آن یک عنصر به تدریج ظاهر یا ناپدید می‌شود.
      • ایجاد منوهای کشویی یا تب‌های پنهان.

    ویژگی display

    • تعریف: این ویژگی نحوه نمایش یک عنصر را تعیین می‌کند. به عبارت دیگر، مشخص می‌کند که یک عنصر چگونه در جریان عادی صفحه قرار می‌گیرد.
    • مقادیر اصلی:
      • none: عنصر به طور کامل از صفحه حذف می‌شود. گویی هرگز وجود نداشته است. فضای اشغال شده توسط عنصر آزاد می‌شود و عناصر دیگر می‌توانند جایگزین آن شوند.
      • block: عنصر به صورت یک بلوک نمایش داده می‌شود و به طور کامل عرض والد خود را اشغال می‌کند.
      • inline: عنصر به صورت درون خطی نمایش داده می‌شود و فقط به اندازه محتویات خود فضا اشغال می‌کند.
      • inline-block: ترکیبی از inline و block است. عنصر به صورت درون خطی نمایش داده می‌شود، اما می‌توان عرض و ارتفاع آن را به صورت دلخواه تنظیم کرد.
    • کاربردها:
      • تغییر ساختار صفحه به صورت دینامیک.
      • ایجاد انواع مختلف طرح‌بندی (مثلاً ایجاد یک ستون جدید).
      • پنهان کردن کامل یک عنصر به طوری که تأثیری بر چیدمان صفحه نداشته باشد.

         visibility مقدار:     hidden     / اثر: عنصر پنهان می‌شود، اما فضای آن حفظ می‌شود.
        display مقدار:     none     / اثر: عنصر به طور کامل حذف می‌شود و فضای آن آزاد می‌شود.
    ٣,٠١٨
    طلایی
    ٢
    نقره‌ای
    ٥٣
    برنزی
    ١٧
    تاریخ
    ١ ماه پیش

    ویژگی  "Visibility"  صرفاً تعیین میکند که عنصر مورد نظر قابل مشاهده باشد یا خیر  و حتی اگر آنرا "hidden" مقداردهی کنید باز هم عنصر در صفحه جا اشغال میکند اما ویژگی "display" نوع قرار گرفتن عنصر در صفحه را تعیین میکند مقدار "inline" باعث میشود عنصر بتواند باعناصر دیگر در یک خط قرار بگیرد اما عرض و ارتفاع آن قابل کنترل نخواهد بود. مقدار"block" باعث میشود عنصر تمام عرض خطی را که در آن قرار دارد اشغال کند تا عناصر دیگر نتوانند با آن در یک خط قرار بگیرند و عرض و ارتفاع عنصر در این حالت قابل کنترل است مقدار "inline-block" در حقیقت همان "inline" است با این تفاوت که عرض و ارتفاع عنصر قابل کنترل خواهد بود مقدار "none" باعث میشود عنصر مورد نظر به طور کلی قابل دیدن نباشد و  از جریان صفحه خارج شود (این با حالت Visibility: hidden; فرق دارد زیر روی چینش عناصر دیگر تاثیرگذار خواهد بود).

    ویژگی "display" مقادیر دیگری مانند "flex", "grid"  نیز دارد که بحث آنها خیلی مفصل تر است.

    تاریخ
    ١ ماه پیش

    displaySpecifies how an element should be displayedvisibilitySpecifies whether or not an element should be visible

    ٣,٠٩٠
    طلایی
    ٠
    نقره‌ای
    ٢
    برنزی
    ١٤٤
    تاریخ
    ١ ماه پیش

    پاسخ شما