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