CSS Overflow
المحتوي الزائد عن العنصر في لغة CSS
سوف تتعلم في هذا الدرس كيفية معالجة والتحكم في طفح المتحوي خارج العنصر اذا كان حجم المحتوي أكبر من حجم العنصر عن طريق خاصية overflow في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Overflow
المحتوي الزائد عن العنصر في لغة CSS
</>
CSS Overflow
المحتوي الزائد عن العنصر في لغة CSS
عن طريق خاصية overflow في لغة CSS يمكن التحكم طفح المحتوي وهو المحتوي الزائد عن حجم العنصر فاذا كان العنصر أصغر من المحتوي فسوف يطفح المحتوي خارج حدود العنصر ويمكن اخفاء المحتوي الزائد أو عمل scroll داخل العنصر لكي يتم اخفاء جزء وظهور جزء بناء علي scroll لأسفل ولأعلي.
قيم خاصية overflow في لغة CSS:
- visible هذه هي القيمة الأفتراضيه وهي أن المحتوي يطفح خارج حدود العنصر اذا زاد حجم المححتوي عن العنصر او الصندوق.
- hidden تُستخدم هذة القيمة مع خاصية overflow يتم إخفاء المحتوي الزائد عن حجم الصندوق أو العنصر.
- scroll تُستخدم هذة القيمة مع خاصية overflow ليظهر scroll داخل الصندوق لكي يتم قراءة المحتوي الزائد عن حجم الصندوق أو العنصر.
- auto تُستخدم هذة القيمة مع خاصية overflow وهي مثلها تماماً والفرق والوحيد يتم اظهار scroll عند الحاجه وهي اذا تم عرض الصندوق بحجم مختلف علي شاشات مختلفه.
content is overflow
طفح المحتوي خارج حدود العنصر لأن المحتوي زائد عن حجم العنصر عن طريق خاصية overflow في لغة CSS يتم معالجة هذا الأمر.
read content by scroll down
يتم قراءة المحتوي داخل العنصر عن طريق scroll لأسفل داخل العنصر تم ظهور scroll عن طريق خاصية overflow في لغة CSS.
some content is hiddent
بعض المحتوي تم إخفاءه لأنه ليس له مكان داخل حدود العنصر عن طريق خاصية overflow في لغة CSS.
scroll x and scroll y
يمكن عرض scroll رأسي و scroll أفقي عن طريق خاصية overflow في لغة CSS.
CSS overflow values
قيم خاصية overflow في لغة CSS.
overflow:visible|hidden|clip|scroll|auto|initial|inherit;
CSS overflow syntax
طريقة كتابة خاصية overflow في لغة CSS.
overflow:value;
</>
CSS overflow visible
خاصية overflow مع القيمة visible في لغة CSS
خاصية overflow مع القيمة visable في لغة CSS هي الوضع الأفتراضي للعنصر تعني أن المحتوي إذا زاد عن حجم box أو حجم العنصر فأن المحتوي يطفح للخارج لأن ليس له مساحة بداخل العنصر.
CSS overflow visible
خاصية overflow مع القيمة visible في لغة CSS.
#overflow
{
background: skyblue;
color: blue;
padding: 15px;
width: 96%;
height: 60px;
border: 1px solid black;
}
</>
CSS overflow hidden
خاصية overflow مع القيمة hidden في لغة CSS
تُستخدم خاصية overflow نع القيمة hidden لأخفاء الزائد عن حجم الصندوق أو العنصر يظهر جزء من المحتوي وهو بقدر طول وعرض العنصر فقط.
CSS overflow hidden
خاصية overflow مع القيمة hidden في لغة CSS.
#overflow
{
background: skyblue;
color: blue;
padding: 15px;
width: 96%;
height: 60px;
overflow: hidden;
border: 1px solid black;
}
</>
CSS overflow scroll
خاصية overflow مع القيمة scroll في لغة CSS
تُستخدم خاصية overflow مع القيمة scroll في لغة CSS ليظهر scroll داخل الصندوق لكي يتم قراءة المحتوي الزائد عن حجم الصندوق أو العنصر في حال أن المحتوي أكبر من حجم الصندوق.
CSS overflow scroll
خاصية overflow مع القيمة scroll في لغة CSS.
#overflow
{
background: skyblue;
color: blue;
padding: 15px;
width: 96%;
height: 60px;
overflow: scroll;
border: 1px solid black;
}
</>
CSS overflow auto
خاصية overflow مع القيمة auto في لغة CSS
تُستخدم خاصية overflow مع القيمة auto ليظهر scroll فقط عند الحاجه وفي حالات معينة مثل إذا تم عرض الصندوق بحجم مختلف وكان المحتوي أكبر من حجم العنصر علي شاشات مختلفه فسوف يظهر scroll والعكس.
CSS overflow auto
#overflow
{
background: skyblue;
color: blue;
padding: 15px;
width: 96%;
height: 60px;
overflow: auto;
border: 1px solid black;
}
ملاحظة
</>
CSS overflow-x and overflow-y
خاصية overflow-x و overflow-y في لغة CSS
تُستخدم خاصية overflow-x وخاصية overflow-y في لغة CSS لعمل scroll أفقي أو scroll رأسي أو الأثنين معاً.
overflow-x يتحكم scroll في الجانب الأيمن والجانب الأيسر.
overflow-x يتحكم scroll في الأعلي والأسفل.
CSS overflow-x and overflow-y
#overflow
{
background: skyblue;
color: blue;
padding: 15px;
width: 96%;
height: 120px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid black;
}
زائد / تجاوز
بناء الجملة
عنصر
خاصية
تنقل من الأعلي الي الأسفل
قيم
كتلة
قيم
مرئي
مخفي
آلي
صندوق
مضمن
قيمة
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
