ویژگی overflow-y در css
ویژگی overflow-y در css تگ html خارج مرز بالا و پایین
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی overflow-y در css توضیحاتی را ارائه نماییم. ویژگی کاربردی overflow-y در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی overflow-y در زبان طراحی css
به کمک خاصیت overflow-y می توانیم نحوه نمایش محتوای عناصر html که خارج از مرز بالا و پایین افتادند، را تعیین نماییم.
نکات مهم
- زمانی که ارتفاع یک تگ html بزرگتر از محتوا باشد، عنصر از مرز سمت بالا و پایین سر ریز می شود.
- خصوصیت overflow-y تنها در تگ های html بلاک لول قابل استفاده است.
- در صورتی که عنصر html ارتفاع ثابتی نداشته باشد، بزرگتر شدن محتوا در تگ html مربوطه منجر به سر ریز شدن محتوای عنصر نخواهد شد.
- در صورتی که عنصر html ارتفاع ثابتی داشته باشد، بزرگتر شدن محتوا در تگ html مربوطه منجر به سر ریز شدن محتوای عنصر html درجهت بالا و پایین خواهد شد.
- خصوصیت overflow-x جهت تعیین نحوه نمایش محتوای عناصر html که خارج از مرز چپ و راست افتادند، کاربرد دارد.
مقادیر صفت کاربردی overflow-y در زبان طراحی سی اس اس
صفت overflow-y که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:
- مقدار visible
- مقدار hidden
- مقدار scroll
- مقدار auto
- مقدار initial
- مقدار inherit
برای کسب اطلاعات بیشتر در مورد طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
مقدار visible درون خاصیت overflow-y در زبان css
اگر ویژگی overflow-y در css را برای یک عنصر html برابر با مقدار visible قرار دهیم، در حقیقت می خواهیم مقدار پیش فرض خصوصیت برای افزایش محتوای عنصر html اعمال گردد. و منجر به سر ریز شدن محتوای تگ html از مرز بالا و پایین شود. مقدار visible به عنوان مقدار پیش فرض خصوصیت overflow-y محسوب می شود.
div{ overflow-y: visible; }
مقدار hidden درون خاصیت overflow-y در زبان سی اس اس
اگر خاصیت overflow-y را برای یک عنصر html برابر با مقدار hidden قرار دهیم، در حقیقت می خواهیم سرریز شدن محتوای عنصر html در صورت بیرون زدگی طولی ناشی از بزرگتر بودن محتوا نسبت به ارتفاع نمایش داده نشود.
div{ overflow-y: hidden; }
مقدار scroll درون خاصیت overflow-y در زبان css
اگر خاصیت overflow-y را برای یک عنصر html برابر با مقدار scroll قرار دهیم، در حقیقت می خواهیم سرریز شدن محتوای عنصر html در صورت بیرون زدگی طولی ناشی از بزرگتر بودن محتوا نسبت به ارتفاع تگ html ، برای تگ html اسکرول بار افقی یا طولی جهت نمایش رسم شود.
div{ overflow-y: scroll; }
مقدار auto درون خاصیت overflow-y در زبان سی اس اس
اگر ویژگی overflow-y در css را برای یک عنصر html برابر با مقدار auto قرار دهیم، در حقیقت می خواهیم سرریز شدن محتوای عنصر html در صورت بیرون زدگی طولی ناشی از بزرگتر بودن محتوا نسبت به ارتفاع تگ html ، تا زمانی که به نقطه بیرون زدگی برسیم نمایش داده نشود و در زمان رسیدن به نقطه سرریز ، اسکرول بار افقی برای تگ html ترسیم گردد.
div{ overflow-y: auto; }
مقدار initial درون خاصیت overflow-y در زبان css
اگر خاصیت overflow-y را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت overflow-y در زبان سی اس اس
اگر ویژگی overflow-y در css را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
بررسی خاصیت overflow-y از نظر نسخه زبان طراحی css
ویژگی کاربردی overflow-y در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
بررسی ساختاری خصوصیت overflow-y در زبان طراحی سی اس اس
عناوین ساختاری خاصیت overflow-y | وضعیت ساختاری خاصیت overflow-y |
مقدار پیش فرض | visible |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.overflowY="scroll |
پشتیبانی مرورگرهای اینترنتی از ویژگی overflow-y در css
خاصیت css | |||||
overflow-y | 4.0 | 9.0 | 3.5 | 3.0 | 9.5 |
پیوندهای مهم و کاربردی
تگ های HTML در سایت آموزی | تگ های جدید HTML5 در سایت آموزی | صفات تگ های HTML در سایت آموزی | تگ های منسوخ شده HTML5 در سایت آموزی | تگ های block level و inline level در سایت آموزی | تگ های HTML در W3school | ویژگی های CSS در سایت آموزی | ویژگی های CSS در W3schools
ویژگی overflow-y در css تگ html خارج مرز بالا و پایین – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید