CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS
سوف تتعلم في هذا الدرس طريقة تعويم عناصر HTML باستخدام خاصية ال float وهي عرض العناصر بطريقة أفقية تبدأ من جهة اليمين أو تبدأ من جهة اليسار ويستخدم تعويم العناصر لتقسيم صفحة الويب.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS
</>
CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS
- convert لتحويل طريقة عرض العناصر من display block إلي طريقة عرض display inline-block.
- diraction لصف العناصر بشكل متسلسل بطريقة أفقية من جهة اليمين أو من جهة اليسار.
ملاحظة: يتم تسلسل العناصر بشكل أفقي في حالة أن العنصر له مساحة داخل عرض الصفحة فإذا كان ليس له مساحة فيبدأ صفحة أسف الصف العلوي من جهة اليسار أو من جهة اليمين علي حسب قيمة خاصية float إما left أو right.
قيم خاصية float في لغة CSS:
- none وهي الوضع الافتراضي لأي عنصر ويتم عرض العنصر علي حسب خاصية display.
- left وهو يتم عرض العناصر من جهة اليسار وفقاً لترتيبه داخل الصف وترتيب الصفوف.
- right وهو يتم عرض العناصر من جهة اليمين وفقاً لترتيبه داخل الصف وترتيب الصفوف.
float right
كانت العنصر في السابق أسفل بعضها لبعض لأن طريقة عرضها من النوع block وأصبحت الأن مع خاصية float من الجهة اليمني وايضا تم صفهم بجوار بعض لسبب أن لهم مساحة في الصف الأول.
float left
كانت العنصر في السابق أسفل بعضها لبعض لأن طريقة عرضها من النوع block وأصبحت الأن مع خاصية float من جهة اليسار وايضا تم صفهم بجوار بعض لسبب أن لهم مساحة في الصف الأول.
CSS float syntax
طريقة كتابة خاصية float في لغة CSS.
float:value;
CSS float values
قيم خاصية float في لغة CSS.
float:none|left|right|initial|inherit;
مًشكلة
</>
CSS float none
خاصية float مع القيمة none في لغة CSS
تُستخدم خاصية float مع القيمة none لألغاء التأثير الناتج عن خاصية float أو لعرض العناصر بوضعهم الأفتراضي علي حسب طريقة عرض العنصر الناتج عن خاصية display في لغة CSS.
CSS float none
خاصية float مع القيمة none في لغة CSS.
p
{
float: none;
border:red solid 1px;
}
</>
CSS float left
خاصية float مع القيمة left في لغة CSS
تُستخدم خاصية float مع القيمة left لصف وتعويم العناصر من جهة اليسار وتغيير عرض العناصر من display block إلي عرض display inline-block في لغة CSS.
CSS float left
خاصية float مع القيمة left في لغة CSS.
p
{
float:left;
border:red solid 1px;
}
</>
CSS float right
خاصية float مع القيمة right في لغة CSS
تُستخدم خاصية float مع القيمة right لصف وتعويم العناصر من الجهة اليمني وتغيير عرض العناصر من display block إلي عرض display inline-block في لغة CSS.
CSS float right
خاصية float مع القيمة right في لغة CSS.
p
{
float:right;
border:red solid 1px;
}
</>
CSS Float rules
قواعد خاصية float في لغة CSS.
- content إذا كان هناك container حاوية مساحتة عرضها 100% من صفحة الويب فإن خاصية float لا تحدث تأثير واضح إلا إذا تم إستخدام float مع العناصر الداخلية فسوف يحدث عن ذلك تأثير واضح وهو تغيير إتجاه المحتوي الداخلية للحاوية.
- 3d سوف تُصف العناصر الداخلية للحاوية الناتج عن إستخدام خاصية float عكسي خاصية float مع القيمة left سوف ينتج [Home - Profile - Contact ] وخاصية float مع القيمة right سوف ينتج [ Contact - Profile - Home].
- display إستخدام خاصية float مع أي قيمة left أو right سوف ينتج عنها تتحويل عرض جميع العناصر من النوع display block إلي طريقة عرض مختلفة display inline-block.
CSS float no effect
لا يحدث تأثير واضح عن طريق خاصية float في لغة CSS في حال أن الحاويه 100% وعدم إستخدام flaot مع العناصر الداخلية للحاويه.
div
{
width:100%;
float: right;
border:dashed 2px blue;
}
CSS float change element position
تغيير موضع العناصر وترتيبها طريق خاصية float في لغة CSS.
span
{
float:right;
border:red solid 1px;
padding:5px;
}
CSS float change display
تغيير طريقة عرض العناصر من display block إلي display inline-block عن طريق خاصية float في لغة CSS.
div
{
float: left;
padding: 15px;
border:dashed blue 2px;
margin-left:5px;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
