السلام عليكم، سنرى في هذا الدرس الخواص 'CLEAR'، 'FLOAT' و 'OVERFLOW'.
الخاصية FLOAT
ما هي الخاصية FLOAT ؟
الخاصية 'FLOAT' هي خاصية تجعل العنصر يطفو في جهة داخل العنصر المحتوي له، و لديها ثلاث قيم خاصة، و تقبل من القيم الشاملة قيمتين.
القيم الخاصة للخاصية FLOAT
لدى الخاصية 'FLOAT' ثلاث قيم خاصة و هم :
• AUTO : هي القيمة التلقائية للخاصية، و تجعل العنصر يظهر في مكانه.
• LEFT : قيمة تجعل العنصر يطفو في جهة اليسار داخل العنصر المحتوي له.
• RIGHT : قيمة تجعل العنصر يطفو في جهة اليمين داخل العنصر المحتوي له.
القيم الشاملة التي تقبلها الخاصية FLOAT
تقبل الخاصية 'FLOAT' من القيم الشاملة قيمتين و هما :
• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'FLOAT'، تورث القيمة 'INHERIT' للعنصر الطفو من العنصر المحتوي له.
• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'FLOAT'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'NONE'.
الخاصية CLEAR
ما هي الخاصية CLEAR ؟
عند عمل Float لعنصر HTML، تطفو جميع العناصر التي توجد أسفله داخل العنصر المحتويهم مكانه، الخاصية 'CLEAR' معمولة لتفادي هذا الموضوع، و بالتالي فهي خاصية تمنع العنصر من الطفو في جهة معينة داخل العنصر المحتوي له، و لديها أربع قيم خاصة، و تقبل قيمتين من القيم الشاملة.
القيم الخاصة للخاصية CLEAR
لدى الخاصية 'CLEAR' أربع قيم خاصة و هم :
• NONE : هي القيمة التلقائية للخاصية، و تسمح بالطفو في كلتا الجهتين.
• LEFT : قيمة تمنع طفو عنصر وراء عنصر طافٍ بقيمة 'LEFT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في يسار العنصر الذي يحتويه.
• RIGHT : قيمة تمنع طفو عنصر وراء عنصر طافٍ بقيمة 'RIGHT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في يمين العنصر الذي يحتويه.
• BOTH : قيمة تمنع طفو عنصر وراء عنصر طافٍ سواء بقيمة 'LEFT' أو بقيمة 'RIGHT' للخاصية 'FLOAT' داخل العنصر الذي يحتويهما، و تمنع طفو العنصر في كلتا جهتي العنصر الذي يحتويه، و تصنَّف أحسن قيم الخاصية 'CLEAR'.
القيم الشاملة التي تقبلها الخاصية CLEAR
تقبل الخاصية 'CLEAR' من القيم الشاملة قيمتين و هما :
• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'CLEAR'، تورث القيمة 'INHERIT' للعنصر منع الطفو من العنصر المحتوي له.
• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'CLEAR'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'NONE'.
الفيديو التوضيحي للدرس
الخاصية OVERFLOW
ما هي الخاصية OVERFLOW ؟
الخاصية OVERFLOW هي خاصية تحدد ما يمكن فعله في حالة تواجد عنصر ذو محتوى أكبر من العنصر المحتوي له، يعني في حالة فيضان محتوى عنصر داخل العنصر الذي يحتويه، و لا تعمل الخاصية سوى في العناصر من نوع Block، و التي لها ارتفاع محدد بالخاصية 'HEIGHT'، لديها أربع قيم خاصة، و تقبل من القيم الشاملة قيمتين.
القيم الخاصة للخاصية OVERFLOW
لدى الخاصية 'OVERFLOW' أربع قيم خاصة و هم :
• VISIBLE : هي القيمة التلقائية للخاصية، و لا تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه، و بالتالي يتعدى محتوى العنصر حدود العنصر المحتوي له.
• HIDDEN : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه خافية المحتوى الفائض عرضاً و ارتفاعاً.
• SCROLL : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه مضيفة Scrollbar أفقية و عمودية لإضهار المحتوى الفائض، و في حالة عدم فيضان محتوى العنصر داخل العنصر الذي يحتويه، القيمة 'SCROLL' تُظهر Scrollbars غير مفعلة.
• AUTO : قيمة تحصر فيضان محتوى العنصر داخل العنصر الذي يحتويه مضيفة Scrollbar أفقية و عمودية لإضهار المحتوى الفائض، و تصنف أحسن قيم الخاصية 'OVERFLOW' حيث أنها لا تُظهر Scrollbars إلا بعد حالة الفيضان، ليس كقيمة 'SCROLL' التي تُظهر Scrollbars غير مفعلة و لو في حالة عدم الفيضان.
القيم الشاملة التي تقبلها الخاصية OVERFLOW
تقبل الخاصية 'OVERFLOW' من القيم الشاملة قيمتين و هما :
• INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'OVERFLOW'، تورث القيمة 'INHERIT' للعنصر ما يمكن فعله في حالة فيضان محتوى عنصر داخله من العنصر المحتوي له.
• INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'OVERFLOW'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'VISIBLE'.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس