CSSطراحی سایتگوناگون

۱۷-خاصیت Display در CSS

خاصیت Display در CSS

با استفاده از خصوصیت Display می توانیم مشخص کنیم که عنصر مورد نظرمون چگونه نمایش داده شود و یا با استفاده از خصوصیت visibility می توانیم تعیین کنیم که عنصر مورد پنهان (hidden) یا قابل رویت (visible) باشد.

 

Display

 

 


پنهان کردن یک عنصر (hidden)

 

به دو روش ما می توانیم یک عنصر را پنهان کنیم:

  • ۱-برای خصوصیت Display مقدار none قرار دهیم.
  • ۲-برای خصوصیت Visibility مقدار hidden قرار دهیم.

 

 

البته باید به این نکته توجه کرد که این دو روش نتایج مختلفی را تولید میکنند.

۱-در روش اول (Display:none) ،عنصر حذف میشود و اثری از این عنصر باقی نمیماند.

 

 

تصویر قطعه کد بالا به شکل زیر است:

ِِDisplay

 

۲-در روش دوم (visibility:hidden) ،عنصر حذف نمیشود در واقع پنهان میشود و فضایی که اشغال کرده یا در واقع اثر باقی خواهد ماند.

 

 

تصویر قطعه کد بالا به شکل زیر است:

Display

 


عناصر inline و block

 

block : اگر Display یک عنصر را روی block قرار دهیم ،عنصر تمام طول آن سطر را اشغال می کند.

مثالی از عناصری که خاصیت block دارند:

  • <h1>
  • <p>
  • <div>

inline : اگر Display یک عنصر را روی inline قرار دهیم ،عنصر تنها به اندازه ای که نیاز دارد عرض بک سطر را اشغال می کند.

مثالی از عناصری که خاصیت inline دارند:

  • <span>
  • <a>

 


چگونه طریقه نمایش یک عنصر را تغییر دهیم

 

تغییر دادن یک عنصر از inline به block یا برعکس می تواند به زیبایی صفحه ی مورد نطرمان کمک کند.

مثال پیش رو، عناصر مربوط به لیست را به صورت inline به نمایش قرار می گذارد.

تصویر قطعه کد بالا به شکل زیر است:

 

display

 

مثال پیش رو ،عنصر span را به عنوان عنصر block به نمایش قرار می گذارد.

 

 

تصویر قطعه کد بالا به شکل زیر است:

dis

 

 

توجه : باید به این نکته توجه کرد که با تغییر دادن نوع نمایش یک عنصر ، تنها چگونگی نمایش عنصر را تغییر میدهیم و نوع آن تغییر نخواهد کرد.به طور مثال برای یک عنصر inline که Display آن block تنظیم شده است اجازه نخواهد داد که یک عنصر block به صورت تو در تو داخل آن قرار داده شود.

 


بخش بعدی

بخش قبلی

 

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن