سلام کاربران گرامی همانطورکه میدانید مشخصه ی Display صفتی است که نحوه ی نمایش عناصر موجود در یک صفحه html را کنترل میکند. علاوه بر آن میتوانید تعیین کنید که عنصری نمایش داده شود یا نه، یعنی میتوانید با استفاده از این مشخصه بخشی از صفحه را مخفی کنید.

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

Display و Visibility
مشخصه Display

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

عناصر بلوک ( Block Elements)؛
عناصر درون خط ( Inline Elements)

عناصر بلوک به صورت پیشفرض تمام عرض محدوده ای که در آن قرار گرفته اند را اشغال میکنند و علاوه بر آن از بالا و پایین یک سطر با سایر عناصر فاصله خواهند داشت. از جمله این عناصر میتوان به تگهای h یا سرتیترها، تگهای p یا پاراگراف و تگ Div اشاره داشت.
برای اینکه مفهوم عناصر بلوک را درک کنید میتوانید به صورت عملی آنها را مورد استفاده قرار دهید. برای نمونه، صفحه html ای ایجاد کنید و کد زیر را درون آن بنویسید:

<h1>تیتر نخست</h1>
<h2>تیتر رده ی دوم</h2>

اگر کد فوق را در قالب صفحه وب مشاهده کنید خواهید دید که هرکدام از نوشته ها در یک سطر جداگانه قرار گرفته اند چراکه تگ h ذاتا یک عنصر بلوکی است.

در مقابل بعضی از عناصر، درون خط هستند، مثل تگ <a> یا تگ <span>. اگر مثال فوق را با این عناصر امتحان کنید، نتیجه کاملا متفاوت خواهد بود:

<span> تیتر نخست </span>
<span>تیتر رده ی دوم</span>

و هر دو متن در امتداد یکدیگر نمایش داده خواهند شد.

با استفاده از مشخصه ی Display میتوانید نحوه ی نمایش عناصر درون خط را به بلوک و یا برعکس تبدیل کنید. این مشخصه مقادیر زیر را دریافت میکند:

Block
Inline
Inline-block
None
Table
Compact

البته مقادیر دیگری نیز وجود دارند که کاربرد زیادی ندارند. در بین موارد فوق نیز پرکاربردترین آنها شامل ۴ تای نخست است که به توضیح آنها خواهیم پرداخت.
Display:block

این مقدار باعث میشود تا عناصری که به صورت درون خط هستند، به شیوه ی عناصر بلوک نمایش داده شوند. در مثالی که داشتیم، تگهای span در امتداد یکدیگر نمایش داده میشدند ولی میتوانیم نحوه ی نمایش آنها را مانند تگهای h تغییر دهیم:

span { display:block;}

اگر کد css بالا را به تگهای span موجود در صفحه ( که ذاتا درون خط هستند ) اختصاص دهید، آنها به صورت بلوک به نمایش درخواهند آمد.
Display: inline

این مقدار دقیقا برعکس مقدار قبلی است و عناصری را که به صورت بلوک هستند را به صورت درون خط نمایش خواهد داد. به عنوان مثال:

H1,h2{ display:inline;}

اگر این کد را برای تگهای h1 و h2 در صفحه اعمال کنید، بر خلاف مثال نخست که هرکدام در یک سطر بودند، در اینجا آنها را در امتداد یکدیگر و در یک سطر خواهید دید.
Display: inline-block

مقدار ترکیبی است از دو مقدار قبلی، یعنی یک عنصر را هم به صورت بلوک و هم به صورت درون خط تبدیل خواهد کرد.
Display: none

اگر بخواهید عنصری در صفحه نمایش داده نشود از مقدار none برای صفت Display استفاده میکنیم.
مشخصه Visibility

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

ولی مشخصه ی visibility فضا را برای عنصر حفظ میکند و تنها از نمایش داده شدن آن جلوگیری میکند. برای درک بهتر تفاوت بین display و visibility نمونه آنلاین زیر را مشاهده کنید:

مشاهده مثال آنلاین

مشخصه ی visibility سه مقدار اصلی را دریافت میکند:

Visible
Hidden
Collapse

مقدار visible تنها در صورتی بکار گرفته میشود که یک عنصر را قبلا hidden کرده باشید. برای مثال یک دکمه طراحی کرده اید که با قرار گرفتن ماوس بر روی آن متنی نمایش داده میشود ولی نمیخواهید در حالت عادی این متن نمایش داده شود.

پس ابتدا با استفاده از visibility:hidden این متن را مخفی میکنیم و سپس تعیین میکنیم که اگر ماوس بر روی دکمه قرار گرفت آنها visibility:visible باشد.
مقدار collapse نیز بیشتر برای ردیفهای جداول مورد استفاده قرار میگیرد که تمام ردیف ها را درون یک ردیف قرار خواهد داد.

با استفاده از صفت visibility و با کمک display میتوانید منوهای آبشاری را نیز طراحی کنید.