Layout - ویژگی display

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی displayمهمترین ویژگی CSS برای کنترل چیدمان (به انگلیسی: Layout) است.[۱]

ویژگی display

ویژگی displayمشخص می‌کند اگر/چطور یک عنصر نمایش داده شود.

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


عناصر block-level (سطح بلوک)

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

عنصر <div> یک عنصر block-level است.

مثالهایی از عناصر block-level:

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

عناصر درون خطی (Inline)

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

این یک عنصر <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 انجام شود. عنصر مخفی خواهد شد، و صفحه طوری نمایش داده می‌شود که گویی عنصر در آنجا وجود ندارد:

مثال
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 مشخص می‌کند که یک عنصر باید نمایش داده شود یا خیر


منابع آموزشی