ویژگی overflow-x در css تگ html خارج مرز چپ راست

ویژگی 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