کاربرد خاصیت display در CSS

display block

از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:

برای دیدن پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
نکته 1: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته 2: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.

display table

از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:

نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.

display inline

از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:

نکته 1: اگر مثال بالا را در یک فایل html ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.

display inline-block

از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:

نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.

display inline-table

از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:

نکته: خاصیت های زیرمجموعه display inline-table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group.

display list-item

از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:

نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).

display none

از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:

نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).

مثال و پیش نمایش آنلاین

در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display و پیش نمایش آنلاین آن را ملاحظه می کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display در css</title>

<style type="text/css">
body{
   font-family:Tahoma, Geneva, sans-serif;
   font-size:12px;
   direction:rtl;
   line-height:20px;
}
.block-1{
   display:block;
   height:100px;
   width:100px;
   background:#F60;
   margin-bottom:8px;
}
.block-2{
   display:block;
   height:100px;
   width:100px;;
   background:#39C;
   margin-bottom:8px;
}
.block-3{
   display:block;
   height:100px;
   width:100px;
   background:#FC0;
   margin-bottom:8px;
}
.block-4{
   display:table;
   height:100px;
   width:300px;
   background:#F60;
   padding:4px;
}
.block-5{
   display:table-cell;
   height:100px;
   width:100px;;
   background:#39C;
}
.block-6{
   display:table-cell;
   height:100px;
   width:100px;
   background:#FC0;
}
.block-7{
   display:inline-block;
   height:100px;
   width:100px;
   background:#F60;
}
.block-8{
   display:inline-block;
   height:100px;
   width:100px;;
   background:#39C;
}
.block-9{
   display:inline-block;
   height:100px;
   width:100px;
   background:#FC0;
}
</style>
</head>
<body>
« استفاده از display:block »<br />
<div class="block-1">
display:block
</div>
<div class="block-2">
display:block
</div>
<div class="block-3">
display:block
</div>
<hr />
« استفاده از display:table »<br />
<div class="block-4">
display:table
<div class="block-5">
display:table-cell
</div>
<div class="block-6">
display:table-cell
</div>
</div>
<hr />
« استفاده از display:inline-block »<br />
<div class="block-7">
display:inline-block
</div>
<div class="block-8">
display:inline-block
</div>
<div class="block-9">
display:inline-block
</div>
</body>
</html>