میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

display در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش display در CSS با من همراه باشید.

با استفاده از ویژگی display در CSS می توان حالت یا نحوه نمایش یک عنصر / تگ را مشخص کرد، مثلا می توانیم تعریف کنیم که یک تگ بصورت بلاکی ( Block ) نمایش داده شود یا مثلا بصورت اینلاینی ( Inline )

اگه آموزش زبان HTML رو دنبال کرده باشید، خوب می دانید که هر یک از تگ های HTML یک حالت نمایش دارند، مثلا تگ های P و DIV حالت نمایششان بصورت بلاکی یا Block می باشد، این یعنی تمام عرض سطر رو بخودش اختصاص می دهد.

و در مقابل تگ هایی همچون a و b و span و.. نیز تگ های درون خطی یا Inline می باشند که عرض یک سطر رو فقط به نسبت اندازه محتوای خودشون اشغال می کنند.

حال ما به راحتی با استفاده از ویژگی display در CSS می توانیم حالت نمایش یک تگ رو به دلخواه خودمون در صورت نیاز تغییر بدهیم، مثلا می توانیم حالت نمایش تگ P که بلاکی است رو به اینلاینی یا Inline تغییر بدهیم.

 


 

inline

اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. <span><em> و <img> مثال هایی از این نوع هستند.

عناصر inline می توانند margin و/یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند.

واقعیت این است که عناصر inline هم می توانند عرض و ارتفاع بگیرند اما باید از طریق ویژگی display به نوع inline-block تبدیل شوند.

inline-block هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت.

block

در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیش فرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال می کند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.

عناصری مثل <section> , <article> , <div> , <h6>...<h1> , <ul> , <p> از نوع block هستند.

با استفاده از ویژگی display شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و بالعکس تبدیل کنید.

علاوه بر block و inline این ویژگی مقادیر دیگری هم می پذیرد که در ادامه شرح داده شده اند:

 

none

با استفاده از این مقدار می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.

نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت.

div {
 display: none;
 }

 

 

inline-block

همانطور که گفته شد رفتار عنصر را شبیه به رفتار inline می کند با این تفاوت که می توانید به عنصر عرض و ارتفاع بدهید.

list-item

باعث می شود تا رفتار عنصر شبیه به رفتار آیتم های یک لیست بشود. معادل آن در HTML عنصر <li> می باشد.

run-in

این مقدار وابسته به نوع عناصر داخل آن و بعد از آن رفتار متفاوت از خود نشان می دهد. همچنین در مرورگرهای اصلی به درستی بطور کامل پشتیبانی نمی شود

  • اگر عنصری از نوع run-in دارای فرزندی از نوع block باشد عنصر run-in شبیه به block رفتار می کند.
  • اگر یک عنصر block دقیقا بعد از عنصری از نوع run-in بیاید. عنصر run-in رفتار inline از خود نشان می دهد و کنار عنصر block در یک خط قرار می گیرد.
  • اگر یک عنصر inline دقیقا بعد از عنصری از نوع run-in بیاید, عنصر run-in رفتار block به خود خواهد گرفت.

 

 

table

با استفاده از مقادیر زیر می توان جدول و عناصر آن را در CSS شبیه سازی کرد.

بیشتر مقادیر لیست شده در زیر معادل تگ های مربوط به جدول در HTML عمل می کنند:

  • table: <table>
  • table-row-group: <tbody>
  • table-column: <col>
  • table-column-group: <colgroup>
  • table-header-group: <thead>
  • table-footer-group: <tfoot>
  • table-row: <tr>
  • table-cell: <td>
  • table-caption: <caption>
  • inline-table: این مقدار معادل HTML ندارد. کار آن دقیقا شبیه به مقدار table است با این تفاوت که به جدول رفتار inline می دهد.

 

flex

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

 

inline-flex

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل Flexbox در کنار هم می چیند.

 

grid

رفتار عنصر را تبدیل به block می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.

 

inline-grid

رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.

 

ارتباطات بین ویژگی های display و position و float در  CSS

 

  • اگر display مقدار none داشته باشد عنصر چارچوپی نخواهد داشت و ویژگی های float و position بر روی عنصر تاثیری نخواهند گذاشت.
  • در غیر این صورت اگر position مقدار absolute و یا fixed داشته باشد ویژگی float تاثیری بر روی عنصر نخواهد گذاشت و برابر none خواهد بود و مقدار display بر اساس جدول زیر محاسبه می شود.
  • در غیر این صورت اگر float مقداری غیر از none داشته باشد عنصر رفتار float خواهد داشت و مقدار display بر اساس جدول زیر محاسبه می شود.
  • در غیر اگر عنصر مورد نظر عنصر ریشه (<html>) باشد ویژگی display بر اساس جدول زیر محاسبه می شود.
  • اگر هیچ کدام از شرایط بالا را نداشته باشیم. مقدار display همانی خواهد بود که تعیین می کنید.

 

ارتباطات بین ویژگی های display و position و floatمقداری که شما تعیین می کنید
tableinline-table
blockinline, table-row-group, table-column, table-column-group,
table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block
برار با مقداری که تعیین شده استمقادیر دیگر

 

 

پشتیبانی مرورگر ها

ویژگی display در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر و همچنین اندروید و iOS پشتیبانی می شود.

مقدار run-in فقط در مرورگرهای اپرا و سافاری و اینترنت اکسپلورر ۸ به بالا پشتیبانی می شود. و همچنین تا نسخه ۳۲ کروم پشتیبانی می شد اما از آن به بعد کروم این ویژگی را پشتیبانی نمی کند.

 


 

مقدارتوضیح
inlineیک عنصر را بصورت درون خطی نمایش میدهد
( استفاده از width و height تاثیری ندارد )
inline-blockیک عنصر را بصورت درون خطی نمایش میدهد
( استفاده از width و height تاثیر دارد )
blockیک عنصر را بصورت تمام عرض نمایش میدهد
list-itemیک عنصر را همانند آیتم های یک لیست نمایش میدهد ( همانند تگ Li )
run-inبسته به نوع عنصر میتواند حالت متفاوتی داشته باشد
noneاز نمایش یک عنصر در مرورگر جلوگیری میکند. ( مخفی میکند )
contentsیک عنصر را در حالت ظرفی برای نگهداری محتوا و دیگر عناصر نمایش میدهد
flexیک عنصر را در حالت فلکس (تمام عرض) نمایش میدهد
inline-flexیک عنصر را در حالت فلکس (درون خطی) نمایش میدهد
gridیک عنصر را در حالت گرید / شبکه ای (تمام عرض) نمایش میدهد
inline-gridیک عنصر را در حالت گرید / شبکه ای (درون خطی) نمایش میدهد
tableیک عنصر را در حالت جدول (تمام عرض) نمایش میدهد
inline-tableیک عنصر را در حالت جدول (درون خطی) نمایش میدهد
table-captionیک عنصر را به حالت کپشن جدول ( caption ) نمایش میدهد
table-column-groupیک عنصر را به حالت ( colgroup ) جدول نمایش میدهد
table-header-groupیک عنصر را به حالت ( thead ) جدول نمایش میدهد
table-footer-groupیک عنصر را به حالت ( tfoot ) جدول نمایش میدهد
table-row-groupیک عنصر را به حالت ( tbody ) جدول نمایش میدهد
table-cellیک عنصر را به حالت سلولی از جدول ( td ) نمایش میدهد
table-columnیک عنصر را به حالت ستونی از جدول ( col ) نمایش میدهد
table-rowیک عنصر را به حالت سطری از جدول ( tr ) نمایش میدهد
initialاستفاده از مقدار پیش فرض یا اولیه
inheritاستفاده از مقدار پدر یا والد ( به ارث بری )

 


امیدواریم آموزش display در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssdisplay cssdisplay در CSSdisplay در css چیستw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfانواع display در cssخاصیت display در cssخصوصیت display در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسصفت display در cssفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟