خانه / آموزش CSS / بخش بیست و یکم- آموزش سرریز در CSS
پشتیبان وب سایت وردپرس
"

تاریخ بروزرسانی: ۵ فروردین ۱۳۹۸ تعداد بازدید : 11 بازدید بدون دیدگاه

بخش بیست و یکم- آموزش سرریز در CSS

قدم قبلی >< قدم بعدی

 

CSS Layout – سرریز

ویژگی سرریز CSS کنترل آنچه که با محتوایی که بیش از حد بزرگ است به یک منطقه متصل می شود.

سرریز CSS

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

دارایی سرریز دارای مقادیر زیر است:

  • قابل مشاهده – پیش فرض سرریز قطع نشده است. محتوا در خارج از جعبه عنصر ارائه می شود
  • پنهان – سرریز کپی شده است، و بقیه محتوای غیر قابل مشاهده است
  • پیمایش – سرریز کپی شده است و یک نوار پیمایش اضافه شده است تا بقیه محتوا را مشاهده کنید
  • خودکار – مشابه برای حرکت، اما آن را اضافه می کند اسکرول باریک تنها در صورت لزوم

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

توجه داشته باشید : در OS X Lion (در مک)، اسکرول های بطور پیش فرض پنهان هستند و تنها هنگام استفاده می شود (حتی اگر “overflow: scroll” تنظیم شده باشد) نشان داده می شود.

سرریز: قابل مشاهده است

به طور پیش فرض، سرریز قابل مشاهده است، به این معنی که آن بریده نشده است و خارج از جعبه عنصر ارائه می شود:

شما می توانید از ویژگی سرریز استفاده کنید، زمانی که می خواهید کنترل بهتر طرح را داشته باشید. property overflow مشخص می کند چه اتفاقی می افتد اگر محتوای یک جعبه عنصر را سرریز کند.
مثال

 

سرریز: پنهان

با مقدار پنهان، سرریز کپی شده است، و بقیه محتوا پنهان است:

شما می توانید از ویژگی سرریز استفاده کنید، زمانی که می خواهید کنترل بهتر طرح را داشته باشید. property overflow مشخص می کند چه اتفاقی می افتد اگر محتوای یک جعبه عنصر را سرریز کند.
مثال

 

سرریز:پیمایش

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

شما می توانید از ویژگی سرریز استفاده کنید، زمانی که می خواهید کنترل بهتر طرح را داشته باشید. property overflow مشخص می کند چه اتفاقی می افتد اگر محتوای یک جعبه عنصر را سرریز کند.
مثال

بیشتر بدانید:  بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

سرریز: خودکار

مقدار خودکار شبیه به حرکت است، اما تنها زمانی که لازم است، نوارهای پیمایش را اضافه می کند:

شما می توانید از ویژگی سرریز استفاده کنید، زمانی که می خواهید کنترل بهتر طرح را داشته باشید. property overflow مشخص می کند چه اتفاقی می افتد اگر محتوای یک جعبه عنصر را سرریز کند.
مثال

overflow-x و overflow-y

خواص overflow-x و overflow-y مشخص می کند که آیا سرریز محتوای فقط به صورت افقی یا عمودی (یا هر دو) تغییر کند:

overflow-x مشخص می کند چه کاری با لبه های سمت چپ / راست محتوا انجام می شود.
overflow-y مشخص می کند چه کاری با لبه های بالا / پایین محتوا انجام می شود.

مثال

 

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=16568


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

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