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

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

دسته بندی موضوعات
سفارش تبلیغات

overflow در CSS

CSS

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

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

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

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

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

 

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

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

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

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

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

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

 

خاصیت overflow-x

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

 

خاصیت overflow-y

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

 

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

 

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

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

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

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • فرهاد

    تجربی با این خاصیت اشنا شده بودم.

    ممنون

  • rana

    salam,amouzeshatoun kheili alie,ie soal?
    age bekhaim matn vaghti az height safhe ziad shod alamate … neshoun bede cho kar konim?

    • میترا رحیمی

      سلام دوست عزیز
      از چه سیستمی استفاده می کنید؟

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟