جلسه ی چهل و نهم: خصوصیت overflow در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 17 فوریه 2019 120 بازدید

خصوصیت overflow در CSS

در جلسات پیش در مورد خصوصیت های Float (برای دیدن آموزش خصوصیت Float در CSS کلیک کنید) و Clear (برای دیدن آموزش خصوصیت Clear در CSS  کلیک کنید) صحبت نموده ایم. در این آموزش میخواهیم به آموزش خصوصیت overflow در CSS بپردازیم.(برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

خصوصیت overflow در CSS چیست؟

باید بگوئیم که خصوصیت overflow در CSS می تواند از نحوه ی نمایش یا عدم نمایش عناصر در خارج از مرز های خود را مشخص نماید. شاید از خود بپرسید که چگونه یک عنصر از مرز های خود خارج می شود؟

فکر کنید شما یک عنصر را از لحاظ ارتفاع و عرض محدود نکرده اید. حال با افزایش محتویات اندازه ی عنصر ما بزرگتر می شود و عموما محتویات عنصرما از مرز های خود خارج نمی شود.

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

زمانی که عناصر خود را محدود می کنیم چه از لحاظ ارتفاع چه از لحاظ عرض و یا هر دو عناصر ما ممکن است دچار سرریز شوند و عموما از عنصر ما خارج شوند به همین دلیل از خصوصیت overflow در CSS استفاده می کنیم تا این سر ریز را مدیریت کنیم.

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

 

حالات مختلف خصوصیت overflow در CSS

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

  1. visible
  2. hidden
  3. scroll
  4. auto

 

حالت visible

عموما حالت visible به صورت پیشفرض بر روی این خصوصیت قرار دارد در این حالت محتویات خارج شده از عنصر ما نمایش داده می شوند. به نمونه کد زیر توجه کنید:

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="">

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

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

و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>

</div>

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 400px;

font-size: 30px;

color: #000;

border: 3px solid #888;

border-radius: 15px;

margin: 0px auto;

padding: 10px;

overflow: visible;

}

img{

width: 300px;

height: 200px;

margin:10px

}

p {

font-size: 20px;

}

خروجی کد بالا:

خصوصیت overflow در CSS

 

حالت hidden

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

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 400px;

font-size: 30px;

color: #000;

border: 3px solid #888;

border-radius: 15px;

margin: 0px auto;

padding: 10px;

overflow: hidden;

}

img{

width: 300px;

height: 200px;

margin:10px

}

p {

font-size: 20px;

}

خروجی کد بالا:

خصوصیت overflow در CSS

 

حالت scroll

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

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 400px;

font-size: 30px;

color: #000;

border: 3px solid #888;

border-radius: 15px;

margin: 0px auto;

padding: 10px;

overflow: scroll;

}

img{

width: 300px;

height: 200px;

margin:10px

}

p {

font-size: 20px;

}

خروجی کدبالا:

خصوصیت overflow در CSS

 

حالت auto

بر روی آن زمانی که از حالت scroll استفاده می کنیم حتی اگر عنصر ما دارای محتویات اضافی هم نباشد حالت اسکرول ظاهر می شود. حالت auto برای حل این مشکل ایجاد شده است. زمانی که نیازی به اسکرول نباشد اسکرول ظاهر نمی شود و زمانی که محتویات ما زیاد شود حالت اسکرول ایجاد می شود. به نمونه کد زیر توجه کنید:

کد HTML:


<div class="box">

<img src="image/img.jpg" alt="">

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

</div>

<div class="box">

<img src="image/img.jpg" alt="">

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

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

و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>

</div>

کد CSS:


body {

background-color: #fff;

}

.box {

width: 400px;

height: 400px;

font-size: 30px;

color: #000;

border: 3px solid #888;

border-radius: 15px;

margin: 0px 20px;

padding: 10px;

overflow: auto;

float: right;

}

img{

width: 300px;

height: 200px;

margin:10px

}

p {

font-size: 20px;

}

خروجی کد بالا:

خصوصیت overflow در CSS

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

 

خلاصه مطلب

  1. باید بگوئیم که خصوصیت overflow در CSS می تواند از نحوه ی نمایش یا عدم نمایش عناصر در خارج از مرز های خود را مشخص نماید.
  2. عموما از خصوصیت overflow در CSS برای عناصر بلاک استفاده می شود زیرا فقط این عناصر دچار سرریز می شوند.
  3. عموما حالت visible به صورت پیشفرض بر روی این خصوصیت قرار دارد در این حالت محتویات خارج شده از عنصر ما نمایش داده می شوند.
  4. از حالت hidden زمانی استفاده می شود که بخواهیم محتوای خارج شده از عنصر ما نمایش داده نشوند.
  5. زمانی که از حالت scroll استفاده کنیم برای عنصر ما اسکرول قرار میگیرد.
  6. وقتی از حالت Auto استفاده میکنیم اگر نیازی به اسکرول نباشد اسکرول ظاهر نمی شود و اگر محتویات ما زیاد شود حالت اسکرول ایجاد می شود.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی چهل و نهم: خصوصیت overflow در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.