خاصیت display در CSS و مقادیر آن

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

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • نوع نمایش المان ها را در مرورگر را چطور تغییر دهیم؟
  • خاصیت display در css چیست؟
  • خاصیت display چه مقادیری می گیرند؟
  • مقدار inline-block برای خاصیت display چه کاربردی دارد؟
  • مقدار none برای خاصیت display چیست؟تفاوت آن با visibility:hidden چیست؟
  • و…

با ما همراه باشین  ;-) 

انواع مقادیر خاصیت display

همانطور که در جلسه قبل گفتیم المان ها در مرورگر به صورت پیشفرض یکی از دو حالت block یا inline برای نمایش دارند مثلا تگ div به صورت block می باشد و تگ a به صورت inline می باشد.

نوع نمایش inline و block

حالا اگر بخواهیم مثلا المان div به صورت inline نمایش داده شود یا a به صورت block باشد باید چیکار کنیم؟ خاصیت display این امکان را فراهم می کند که نوع نمایش المان ها در مرورگر را تغییر داد. این خاصیت مقادیر متفاوتی می پذیرد که در ادامه به توضیح چند مورد از مهمترین و پرکاربردترین  آن ها می پردازیم.

inline

در مورد حالت نمایش inline به صورت کامل در جلسه قبل توضیح دادیم.گفتیم که بعضی از المان ها مثل <a>،<span>  و … در حالت پیشفرض به اندازه محتوای درونی خود رشد می کنند و در کنار هم در یک خط قرار می گیرند.
با دادن استایل dispaly:inline به یک المان، می توانیم نحوه نمایش یک المان را به inline تغییر بدهیم.

block

به نحوه نمایش block هم در جلسه قبل پرداختیم.گفتیم که بعضی المان ها مثل div در حالت پیشفرض به اندازه تمام عرض والد خود رشد می کند و المان های بعد را به خط بعد هدایت می کند.
با دادن استایل dispaly:block به یک المان، می توانیم نحوه نمایش آن المان را به block تغییر بدهیم.

none

خاصیت dispaly:none باعث می شود المان نمایش داده نشود و بقیه المان ها جای آن را می گیرند. یعنی عرض و ارتفاع المان در نظر گرفته نمی شود.(توجه کنید در این حالت حتی ربات های گوگل هم المان را نخواهند دید)

نکته: اگر بخواهیم که المان نمایش داده نشود و جای آن هم خالی بماند و المان های دیگر جای آن را پر نکنند از خاصیت visibility:hidden استفاده می کنیم.

 

inline-block

با دادن display:inline-block به یک المان، نحوه نمایش آن المان مشابه inline خواهد شد با این تفاوت که در این حالت عرض و ارتفاع تاثیر می گذارند.پس این نوع نمایش ترکیبی از inline و  block می باشد .مثل inline به اندازه محتوای درونش رشد می کند و مثل block

نکته: در جلسه قبل گفتیم که یک المان با نوع نمایش inline، عرض و ارتفاع نمی پذیرد. ولی الان با یاد گرفتن خاصیت display  و مقدار inline-block حرف خود را پس می گیریم . یک المان inline می تواند عرض و ارتفاع بگیرد اگر display آن را inline-block بدهیم.

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

 

مثال برای چهار مقدار inline، block ،inline-block، none

نتیجه اجرا
نتیجه اجرای مثال برای خاصیت display
توضیح کد بالا

توجه کنید نمی توان خط به خط کدها را توضیح داد . حتما خودتون این کدها را بزنید تا دقیقا متوجه عملکرد آن ها شوید.ما نکاتی که لازم است را در ادامه بررسی می کنیم.

  • در پاراگراف اول این مثال با دادن خاصیت dispaly : inline به المان <h2> ، نوع نمایش از حالت block به inline تبدیل شد و ادامه پاراگراف در همان خط قرار گرفت . در حالی که  h2 به صورت پیش فرض block می باشد و باید ادامه متن را به خط بعد می شکست.

تغییر نمایش h2 با خاصیت display و مقدار inline

  • در div اول (منو) نوع نمایش المان li که به صورت پیش فرض به صورت block می باشد با خاصیت display : block  تغییر کرد. در نتیجه مقادیر li ها در یک خط کنار هم قرار گرفتند.(پس خاصیت display:inline برای ایجاد منو افقی هم کاربرد دارد)
  • در مثال بالا از رویداد hover استفاده شده است که در جلسه ششم کامل تدریس شد.بنابراین روی هر المان a که می رویم استایل آن با توجه به رویداد hover: تغییر می کند.

تغییر نمایش li با خاصیت display و مقدار inline

  • در div دوم از المان span استفاده شد که به صورت پیش فرض به صورت inline نمایش داده می شود ولی با خاصیت display : block نحوه نمایش آن تغییر کرد.

تغییر نمایش span با خاصیت display و مقدار block

  • در div سوم  از دو استایل dispaly:none و visibility:hidden برای المان span استفاده کردیم که تفاوت آن ها را در مخفی کردن این المان ببینید.

مقدار none برای خاصیت display

  • در div چهارم  دو بار از المان span استفاده کردیم و به هر دو margin و padding دادیم.المان span ای که استایل display:inline-block گرفته است ، margin و padding هم در راستای افقی و هم در راستای عمودی المان های اطراف span را هول می دهند ولی المان span ای که به صورت پیش فرض inline می باشد ،margin و padding فقط در راستای افقی المان های اطراف span را هول می دهند.

تاثیر margin و padding روی المان span

  • در div پنجم االمان a نحوه نمایش inline-block گرفته است پس تاثیر padding هم در راستای افقی و هم عمودی دیده می شود.

خاصیت dispaly و 4 مقدار inline، block، inline-block،none

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

امیدوارم با خاصیت display در css به خوبی آشنا شده باشید و بتوانید به راحتی در طراحی سایت به کار گیرید.در جلسه بعد با نحوه استایل دهی فونت در CSS آشنا می شویم.

خلاصه جلسه امروز به شرح زیر می باشد:

خصوصیات
ناممقادیر
توضیح
displayinline، block، inline-block،noneمشخص کردن نحوه نمایش یک المان

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 1 امتیاز: 5]