آموزش CSS طرح – نمایش املاک

11 جولای 2021

این displayویژگی مهمترین ویژگی CSS برای کنترل طرح است.


نمایش مشخصات

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

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

عناصر سطح بلوک

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

عنصر <div> یک عنصر در سطح بلوک است.

نمونه هایی از عناصر سطح بلوک:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <فوتور>
  • <بخش>

عناصر درون خطی

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

این یک عنصر inline <span> درون یک پاراگراف است.

نمونه هایی از عناصر خطی:

  • <span>
  • <a>
  • <img>

نمایش: هیچ؛

display: none;معمولاً با جاوا اسکریپت برای پنهان کردن و نشان دادن عناصر بدون حذف و بازآفرینی آنها استفاده می شود. اگر می خواهید بدانید چگونه می توان به این مهم دست یافت ، به آخرین نمونه ما در این صفحه نگاهی بیندازید.

این <script>عنصر display: none; به عنوان پیش فرض استفاده می کند . 


مقدار نمایش پیش فرض را لغو کنید

همانطور که گفته شد ، هر عنصر یک مقدار نمایش پیش فرض دارد. با این حال ، می توانید این را نادیده بگیرید.

تغییر یک عنصر درون خطی به یک عنصر بلوک یا بالعکس ، می تواند برای ایجاد جلوه ای خاص در صفحه مفید باشد و همچنان از استانداردهای وب پیروی کند.

یک مثال متداول ساخت <li>عناصر درون خطی برای منوهای افقی:

مثال

li {
  display: inline;
}

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

مثال زیر عناصر <span> را به عنوان عناصر بلوک نمایش می دهد:

مثال

span {
  display: block;
}

مثال زیر عناصر <a> را به عنوان عناصر بلوک نمایش می دهد:

مثال

a {
  display: block;
}

پنهان کردن یک عنصر – صفحه نمایش: هیچ یا قابل مشاهده بودن: پنهان؟

پنهان کردن یک عنصر می تواند با تنظیم displayخاصیت انجام شود none. عنصر پنهان خواهد شد و صفحه به گونه ای نمایش داده می شود که گویی عنصر موجود نیست:

مثال

h1.hidden {
  display: none;
}

visibility:hidden; همچنین یک عنصر را پنهان می کند.

با این حال ، عنصر همچنان همان فضای قبلی را اشغال خواهد کرد. این عنصر پنهان خواهد شد ، اما همچنان بر طرح بندی تأثیر می گذارد:

مثال

h1.hidden {
  visibility: hidden;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

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