نمایش در CSS (CSS Display & Visibility)
ویژگی «نمایش در CSS (display)» نحوه چیدمان عناصر را کنترل می کند؛ اینکه عنصر به صورت «بلوک (Block)» یا «درون خطی (Inline)» رفتار کند. هر عنصر یک مقدار پیش فرض دارد، اما می توان با display آن را تغییر داد.
ویژگی display در CSS
طبق منبع، display مشخص می کند عنصر چگونه در جریان صفحه نمایش داده شود. مقدارهای رایج شامل inline، block، inline-block، flex، grid، contents و none هستند.
عناصر بلوکی و درون خطی
عنصر بلوکی همیشه از خط جدید شروع می شود و کل عرض موجود را می گیرد؛ در حالی که عنصر درون خطی فقط به اندازه محتوایش فضا اشغال می کند.
تغییر نوع نمایش پیش فرض
می توانید نوع نمایش عناصر را تغییر دهید؛ مثلاً برای ساخت منوی افقی، آیتم های فهرست را درون خطی کنید.
li{ display:inline; }span{ display:block; }a{ display:block; }پنهان سازی: display:none در برابر visibility:hidden
با display:none عنصر کاملاً از جریان سند حذف می شود و فضایی اشغال نمی کند. اما با visibility:hidden عنصر نامرئی می شود ولی همچنان جای خود را نگه می دارد.
h1.hidden{ display:none; }h1.hidden{ visibility:hidden; }هشدار: تغییر display فقط شیوه نمایش را عوض می کند، نه نوع معنایی عنصر. بنابراین قوانین محتوا همچنان برقرار است.
مقادیر متداول display
inlineوblockبرای رفتار پایهinline-blockبرای عنصر درون خطی با توانایی تعیینwidth/heightflexوgridبرای ظرف های چیدمان پیشرفتهcontentsبرای ناپدیدکردن ظرف و حفظ فرزندان در DOM سطح بالاترnoneبرای حذف کامل از جریان صفحه
نکته: برای جدول های عریض، می توانید از الگوی پیمایش افقی استفاده کنید؛ بخش جدول واکنش گرا را ببینید.
مطالعه بیشتر و مسیرهای بعدی
برای تمرین پس از «نمایش در CSS»، سراغ جدول واکنش گرا و استایل دهی جدول بروید. همچنین مقایسه visibility در MDN مفید است.