آموزش طراحی وب

overflow در CSS

با استفاده از overflow شما میتونید باکس محتوایی که دارید رو با اسکرول یا بدون اسکرول نمایش بدید .

CSS

فصل چهارم : Properties در CSS

جلسه بیست و یکم  : overflow در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان تو این جلسه یکی دیگه از خاصیت های css بنام overflow رو بهتون آموزش میدم .

شاید خیلی از دوستان این خاصیت رو بشناسن . با استفاده از overflow شما میتونید باکس محتوایی که دارید رو با اسکرول یا بدون اسکرول نمایش بدید . مثلا یه باکسی دارید که ارتفاع ۲۰۰ پیکسلی داره و محتوای شما بیش از ۵۰ خطه و تو این ۲۰۰ پیکسل قابل نمایش نیست ، در اینجا شما از overflow استفاده می کنید و یک اسکرول عمودی به باکستون میدید تا کاربر برای خوندن کامل محتوا از اسکرول استفاده کنه .

 

قاعده ی دستوری overflow

در دستور بالا شما میتونید یکی از مقادیر زیر رو استفاده کنید :

Visible : با درج این مقدار شما اسکرول رو برمیدارید و محتوارو کامل نمایش میدید ، حتی اگر محتوا از کادر شما خارج بشه .

Hidden : با درج این مقدار ، اگر تصور کنیم باکس محتوای ما ۲۰۰ پیکسله ، محتوایی که خارج از باکس قرار میگیره پنهان میشه و فقط محتوا به اندازه ی مثلا همون ۲۰۰ پیکسل نمایش داده میشه و بقیه ی متن خونده نمیشه .

Scroll : با درج این مقدار ، بطور خودکار اگر متن شما چه از لحاظ عرضی و چه از لحاظ ارتفاعی بیش از عرض و ارتفاع باکس باشه ، اسکرول عمودی و افقی ظاهر میشه و کاربر میتونه همه ی متن رو بصورت کامل با اسکرول مطالعه کنه . نکته اینجاست که اگر متن با عرض و ارتفاع باکس هم همخوانی داشته باشه ، بازهم اسکرول اما بصورت غیرفعال نمایان هست .

Auto : این بهترین گزینه برای overflow هست ، با درج این مقدار باکس بصورت خودکار و در صورت نیاز اسکرول عمودی و یا افقی رو نمایان میکنه و نمایش میده . در صورتی که نیاز نباشه اسکرول و نمایش نمیده حتی بصورت غیرفعال .

 

خاصیت overflow-x

با این خاصیت میتونید اسکرول افقی رو کنترل کنید ، مقادیر هم دقیقا مقادیری هست که برای خاصیت اصلی overflow استفاده می کنید.

 

خاصیت overflow-y

با این خاصیت میتونید اسکرول عمودی رو کنترل کنید ، مقادیر هم دقیقا مقادیری هست که برای خاصیت اصلی overflow استفاده می کنید.

 

این خاصیت توسط تمامی مرورگرهای اصلی پشتیبانی میشه .

 

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین