cssblog.ir logo
P

display

نحوه نمایش عناصر (خطی، بلوکی، جدولی و ...)

مشخصه بسیار مهم و کاربردی display در تعیین نحوه نمایش و قرارگیری عناصر کاربرد دارد و هر توسعه‌دهنده CSS می‌بایست تفاوت مقادیر مختلف این مشخصه را بخوبی بداند

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

مقادیر مختلف display

این مشخصه معمولا چند مقدار مهمinline، inline-block،block،none و تعداد دیگری مقادیر مربوط به جدول‌ها را قبول می‌کند که در ادامه به توضیح آنها خواهیم پرداخت.

inline

به معنی نمایش خطی بوده است و این نوع نمایش را در تگ هایی مانند span و em و strong مشاهده می کنید. برای مثال کافی است در داخل یک تگ p یکی از این تگ ها را قرار دهید و نتیجه را مشاهده کنید.  

در نظر داشته باشید که می‌توان برای عناصری که حالت نمایش خطی دارند padding یا margin تعیین کرد اما این مقادیر نمی‌توانند باعث شوند که عنصر از خطی که در آن قرار دارد خارج شود و فقط مقادیری که مربوط به margin یا padding افقی (چپ و راست)‌ هستند باعث هُل دادن سایر عناصر خواهند شد.

نکته مهم دیگر درباره این عناصر این است که نمی‌توان برای عناصر inline ارتفاع (height) و عرض (width) تعیین نمود و این مشخصه ها نادیده گرفته می‌شود.

inline-block

این مقدار بسیار شبیه به inline عمل می‌کند و عنصر در جهتی که متن جریان دارد (direction) قرار خواهد گرفت اما با این تفاوت که می‌توان برای عنصر عرض و ارتفاع تعیین نمود و آنها نادیده گرفته نمی شوند. مثال: 

block

حتما دقت کرده‌اید که برخی از تگ‌ها مانندdiv وp وul وsection وقتی که در صفحه قرار می‌گیرند سعی می‌کنند تا تمام عرضی که در اختیارشان هست را بگیرند (حتی بدون داشتن عرض 100%) که نوع نمایش را معمولا block می‌نامند که معمولا و اینجانب نیز در سایر مقالات اصطلاحا به آن «بلوکی» می‌گویم. 

 none

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

۱- عنصر بطور کامل از صفحه حذف نمی شود و همچنان در DOM وجود دارد، اما فقط دیده نمی شود.

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

flex

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

دوره ویدیویی آموزش فلکس باکس (flexbox)

 

مقادیر مربوط به جدول (Table)

همانطور که گفته شود برخی از مقادیر مخصوص جدول و رفتارهای مربوط به آن هستد. در اینجا لیست این مقادیر را مشاهده می‌کنید:

div {
	display: table;
	display: table-cell;
	display: table-column;
	display: table-column-group;
	display: table-header-group;
	display: table-row-group;
	display: table-footer-group;
	display: table-row;
	display: table-caption;
}

این مقادیر چه کاربردی دارد؟

کاربرد این مقادیر این ایست که با استفاده از آنها می‌توانیم رفتاری که جدول‌ها دارند را بدون استفاده از تگ‌های مربوط به جدول (مانند table و td) شبیه‌سازی کنیم که گاها می تواند مفید و کاربردی واقع شود.

 در مثال فوق با استفاده از مشخصه display بدون استفاده از تگ‌های مخصوص جدول، رفتار مانند جدول را بوجود آورده‌ایم.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند