التخطيط (Layout)
التحكم في طريقة عرض العناصر (Block, Inline) وتوزيع المساحات الأساسية عبر خصائص Float وغيرها.
1. خصائص العرض (Display)
أنواع العرض الأساسية للعناصر في HTML.
المعاينة
أنا عنصر Block (أأخذ سطر كامل)
أنا عنصر Block آخر
Inline-block 1
Inline-block 2
شرح الكود:
display: block;: العنصر يأخذ كامل العرض المتاح (مثل div, h1, p) ولا يسمح لعنصر آخر بمشاركته السطر.display: inline;: العنصر يأخذ المساحة التي يحتاجها المحتوى فقط (مثل span, a)، لكن لا يمكن تغيير طوله وعرضه (width/height).display: inline-block;: يجمع بين ميزات الاثنين؛ يظهر بجانب العناصر الأخرى كالـ inline، ويسمح بتعديل أبعاده كالـ block.display: none;: يخفي العنصر تماماً ويزيله من الصفحة وكأنه غير موجود.
2. خاصية الطفو (Float & Clear)
خاصية قديمة لتوزيع العناصر لليمين أو اليسار، وجعل النصوص تلتف حولها.
المعاينة
صورة لليمين
هذا النص سيلتف حول العنصر الذي يطفو. يُستخدم الـ Float عادة في ترتيب الصور مع النصوص، حيث يسمح للمحتوى بالالتفاف.
للتخلص من أثر الطفو على العناصر اللاحقة نستخدم خاصية clear.
هذا النص يظهر في الأسفل بفضل clear: both، ولن يتداخل مع العنصر العائم.
شرح الكود:
float: right;أوfloat: left;تجعل العنصر يطفو على جانب معين ويسمح للنص بالالتفاف حوله.clear: both;يوضع في العنصر الذي نريد أن نمنع تداخله مع الـ float، فيبدأ من سطر جديد تماماً.
3. الشفافية والإخفاء (Visibility vs Opacity vs Display None)
طرق مختلفة لإخفاء العناصر.
المعاينة
عادي
Opacity 0.3
Opacity 0 (مخفي، لكن يحجز مساحة)
عادي
شرح الكود:
display: none;يحذف العنصر تماماً من مكان العرض ولا يأخذ أي مساحة.visibility: hidden;يخفي العنصر ولكنه يحجز مكانه الفارغ.opacity: 0;يجعل العنصر شفافاً بنسبة 100% (مخفي)، ولكنه يحجز مكانه ويمكن الضغط عليه إن كان زرًا! (من 0 إلى 1).