می توان گفت که یکی از مهم ترین خصوصیت ها display هست که مشخص کننده جای گذاری نحوه نمایش لی اوت در وب سایت ما هست . هر المان در وب سایت بر اساس نوعی که دارد مشخص می کند که به چه شکلی بایدنمایش داده شود . دو حالت کلی داریم که block و inline هستن .
نحوه نمایش block
المان هایی که نحوه نمایش بلاک یا block دارن بصورت پیش فرض در خط جدید ظاهر می شوند و تمام عرض صفحه رو پوشش میدن . تا جایی که جا دارن از چپ و راست پوشش می دن صفحه رو . نمونه هایی از المان های با نحوه نمایش block :
div
H1:H6
p
form
header
footer
section
نحوه نمایش inline
این المان های inline المان هایی هستن که سطر جدید درست نمیکنن و عرض زیادی هم نمیگیرن ! خیلی قانع اند ! فقط یکم در حدی که نیاز دارند و محتوا دارن جا میگیرن . حالا چه المان هایی هستند اینا !؟
span
a
img
نحوه نمایش none یا همون نمایش مخفی
این خصوصیت میاد المان رو از دید کاربر مخفی میکنه. حالا سوال اینه که مرض داریم بیایم المان رو درست کنیم و بعدش مخفی کنیمش !؟ برای برنامه نویسی javascript یا جاوا اسکریپت استفاده میشه که بتونیم بدون اینکه المان ها رو حذف و ایجاد کنیم بیایم المان ها رو مخفی و نمایان کنیم .
بازنویسی نحوه نمایش المان ها
خب همونجوری که توی این جلسه از دوره آموزش CSS یاد گرفتیم المان های مختلف نحوه نمایش خاصی دارن . ولی میتونیم بیایم اون ها رو طبق خواسته خودمون عوض کنیم ! یعنی بیایم یه المان block رو تبدیل کنیم به المان inline و برعکس ! خیلی نیازمون میشه که از این قابلیت استفاده کنیم .
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;
}
