display Property
ویژگی display
در CSS نوع نمایش عنصر را مشخص می کند. به طور کلی نمایش هر عنصر به دو گونه انجام می شود، داخلی و بیرونی. در نمایش بیرونی نحوه جایگیری و رفتار عنصر در کنار عناصر دیگر مشخص می شود و در نمایش درونی نحوه قرار گیری و رفتار عناصر فرزند (عناصر داخل عنصر مورد نظر) مشخص می شود.
نحوه نوشتار
dispaly: none; display: block; display: inline; display: flex; display: grid; display: table
در ادامه تعدادی از پر کاربردترین مقادیر ویژگی display
را می بینیم:
مقادیر
none
عنصر نمایش داده نمیشود. اما همچنان در ساختار html حضور دارد.
block
عنصر در این حالت تمام عرض صفحه را اشغال میکند. از ابتدای سطر شروع شده و تا انتهای سطر ادامه پیدا می کند.
inline
عنصر هیچ یک از ویژگی های عرض و طول کار نمی کنند و تاثیری نخواهد گذاشت.
inline-block
عنصر خود دارای ویژگی های inline است اما میتوان به آن مقادیر عرض و طول را نسبت داد.
table
در این حالت عنصر مانند جدول رفتار خواهد کرد.
flex
عنصر مانند block رفتار خواهد کرد و عناصر فرزند آن نیز از قوانین flex پیروی خواهند کرد.
inline-flex
عنصر مانند حالت inline رفتار خواهد کرد اما عناصر فرزند آن از قوانین flex پیروی خواهند کرد.
grid
عنصر مانند block رفتار خواهد کرد و عناصر فرزند آن نیز از قوانین grid پیروی خواهند کرد.
inline-grid
عنصر مانند grid رفتار خواهد کرد اما عناصر فرزند آن از قوانین grid پیروی خواهند کرد.
در زیر عناصر را با مقادیر متفاوت از ویژگی display میبینید:
html
<div class="block"> block </div> <div class="inline"> inline </div> <div class="inline-block"> inline-block </div> <div class="table"> table </div> <div class="flex"> flex </div> <div class="inline-flex"> inline-flex </div> <div class="grid"> grid </div> <div class="inline-grid"> inline-grid </div>
css
.block { display: block; background-color: tomato; } .inline { display: inline; background-color: #aaaaaa; } .inline-block { display: inline-block; background-color: dodgerblue; } .table { display: table; background-color: olivedrab; } .flex { display: flex; background-color: red; } .inline-flex { display: inline-flex; background-color: #777777; } .grid { display: grid; background-color: green; } .inline-grid { display: inline-grid; background-color: orange; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند. اما بعضی از مقادیر توسط بعضی مرورگرها بطور کامل پشتیبانی نمی شوند.
flex
این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.
grid
این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.
inline-grid
این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.