NahdaAIنهضة
HTML & CSS • المستوى الثاني • الدرس 4

تحديد طرق العرض والمواقع (Display & Position)

العودة لفهرس المستوى

أهداف الدرس العلمية

  • فهم الفرق بين block و inline.
  • استخدام display: flex; لمحاذاة العناصر بمرونة.
  • استيعاب خيارات position (relative / absolute).
  • تثبيت العناصر أثناء التمرير بـ position: fixed;.

1. طرق عرض العناصر (Display)

display: block;

العنصر يأخذ السطر بالكامل (مثل div, p).

display: inline;

العنصر يأخذ ما يكفي محتواه فقط (مثل span, a).

display: flex;

يحول الحاوية إلى نظام flex المرن لرصف العناصر.

2. تحديد المواقع (Position) و Flexbox

position: relative;

يحرك العنصر بالنسبة لمكانه الأصلي.

position: absolute;

ينزع العنصر من التدفق ويضعه نسبة لأقرب أب relative.

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
التطبيق العملي المباشر

تحدي الدرس الرابع: محاذاة العناصر بـ Flexbox

  1. اجعل .container حاوية مرنة: display: flex;.
  2. وزّع العناصر على الأطراف: justify-content: space-between;.
  3. حاذِ العناصر عمودياً في المنتصف: align-items: center;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 36, Col 1UTF-8Spaces: 2
638 chars
الدرس السابقالانتقال للمستوى الثالث