سلام خدمت شما دوستان عزیز در مورد خاصیت display امروز توضیح میدم امیدوارم که براتون مفید واقع شود.
خاصیت display تعیین می کند آیا المانی نمایش داده شود یا خیر و همچنین نحوه ی نمایش المان را مشخص می کند . خاصیت دیگر نیز visibility است که تعیین می کند عنصری قابل رویت باشد یا خیر (پنهان باشد) .
پنهان سازی المان – display : none یا visibility : hidden
پنهان سازی یک عنصر را می توان با تخصیص مقدار “none” به خاصیت display و یا تخصیص “hidden” به خاصیت visibility انجام داد .
با این وجود لازم است توجه داشته باشید که دو روش مذکور نتایج متفاوتی را به دست می دهند :
visibility:hidden عنصر مربوطه را پنهان می کند ولی دقیقا همان فضایی را که از قبل به خود اختصاص داده بود را اشغال می کند . به عبارتی دیگر, المان مخفی خواهد شد ولی در عین حال layout (شِمای کلی) را تحت تاثیر قرار می دهد :
مثال :
نمونه یک
?
۱
۲
۳
h1.hidden {
visibility: hidden;
}
display:none عنصر مورد نظر را مخفی می سازد, ولی درست برخلاف visibility:hidden هیچ فضایی را اشغال نمی کند . المان پنهان گشته و صفحه ی مورد نظر به گونه ای نمایش داده می شود که گویی آن المان اصلاً حضور ندارد :
مثال :
نمونه دو
?
۱
۲
۳
h1.hidden {
display: none;
}
خاصیت Display در CSS – عناصر Block و Inline
المان block, عنصری است کل پهنا یا عرض موجود را به خود تخصیص داده و اشغال می کند, یک خط فاصله قبل و بعد آن قرار می گیرد (در واقع به صورت عنصری مجزا و مستقل نمایش داده می شود) :
مثال هایی از المان های block زیر ارائه شده :
<h1>
<p>
<li>
<div>
یک عنصر inline (درون خطی) تنها به اندازه ی لازم پهنا را می گیرد و هیچ خط فاصله ی ایجاد نمی کند, که حالت پیش فرض می باشد .
نمونه هایی از آن را زیر مشاهده می کنید :
<span>
<a>
اصلاح نحوه ی نمایش یک عنصر
تغییر یک المان درون خطی (inline element) به یک block element, و یا عکس آن, می تواند در تنظیم ظاهر وب به صورت دلخواه, ولی با رعایت استانداردهای فعلی وب برای طراح بسیار مفید واقع شود .
مثال ذیل المان های <li> را به صورت درون خطی (inline) نمایش می دهد :
مثال :
نمونه سه
?
۱
۲
۳
li {
display: inline;
}
حال این مثال عناصر<span> را به صورت مجزا (block) نمایش می دهد :
مثال :
نمونه چهار
?
۱
۲
۳
span {
display: block;
}
نکته : تنظیم خاصیت display تنها نحوه ی نمایش المان را تغییر می دهد و نه نوع المان مورد نظر را . از این رو یک عنصر درون خطی (inline) با display:block اجازه ی جای دادن دیگر المان های block در خود را ندارد .
