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

overflow در CSS

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

با استفاده از ویژگی overflow در CSS می توان ویژگی های زیر را بصورت خلاصه نوشت، و در کل با استفاده از این ویژگی می توان مشخص کرد که وقتی یک عنصر سَرریز ( در لغت Overflow ) شد ، اون محتوای سرریز شده چگونه نمایش داده شود.

  • overflow-x
  • overflow-y

بطور کلی وقتی محتوای درون یک عنصر از اندازه ارتفاع ( یعنی بصورت عمودی ) اون عنصر بیشتر باشد ، یا اگه محتوا از اندازه عرض ( یعنی بصورت افقی ) اون عنصر بیشتر باشد ، سرریز اتفاق میوفتد، و به اصطلاح میگن محتوا Overflow شده.

حال ما با استفاده از این ویژگی به راحتی می توانیم مشخص کنیم که مثلا اگه محتوا سرریز شد ، اون بخش سرریز شده چگونه نمایش داده شود، آیا مثلا مخفی ( hidden ) باشد یا مثلا کاری کنیم که وقتی محتوا سرریز شد عنصر اسکرول بندازه ( scroll )

این ویژگی فقط بروی عناصر بلاکی ( block ) کار می کند.


مثال شماره ۱ : وقتی محتوا بیشتر از اندازه ارتفاع باشه سرریز اتفاق میوفته

div{
background-color:#8AC007;
padding:3px;
height:50px;
}

مثال شماره ۲ : جلوگیری از سرریز شدن محتوا با استفاده از ویژگی overflow

div{
height:50px;
overflow:auto;
}

مثال شماره ۳ : مخفی کردن محتوای سرریز شده ( دیگه نه اسکرول میندازه نه از باکس میزنه بیرون )

 

مقدارتوضیح
visibleپیش فرض – اگه محتوا از عنصر بزنه بیرون هیچ اسکرولی ایجاد نخواهد شد
hiddenمحتوای سرریز شده مخفی خواهد شد
scrollاسکرول افقی و عمودی در همه حال بروی عنصر ایجاد می شود
autoبصورت خودکار و در صورت نیاز خودش اسکرول ایجاد می کند
initialاستفاده از مقدار پیش فرض یا اولیه
inheritاستفاده از مقدار پدر یا والد ( به ارث بری )

 

 


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

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

 

cssoverflow css شرحoverflow css کاربردoverflow در CSSoverflow در 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تگ overflow در cssخاصیت overflow در cssخصوصیت overflow در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور overflow در cssساختار دستورات CSSسی اس اسصفت overflow در cssفارسی w3schoolsکاربرد overflow در cssکتاب آموزش css فارسیمفهوم overflow در cssویژگی overflow در css
ارسال دیدگاه

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

×

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

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

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

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