Display CSS شرح

من المعروف ان جميع عناصر ال html تنقسم الى عناصر block و عناصر inline

ولكن باستخدام لغة ال CSS يمكن تغيير خواص العناصر بمعنى انه اذا كان العنصر inline فيُمكن تحويله الى block .. وذلك عن طريق خاصية display في CSS

خاصية display في CSS لها العديد من القيم واشهرهم:

1 display: inline;

من خواص العنصر ال inline هو ان العنصر:
- يكون على نفس الخط
⚠ لا يُسمح لك ان تُحدد له خاصية ال height ولا خاصية ال width

2 display: block;

من خواص العنصر ال block هو ان العنصر:
- يكون في سطر مستقل بذاته بمعنى ان قبله <br> وبعده <br>
- يُسمح للعناصر ال block ان تُحدد لهم خاصيه ال height وخاصيه ال width

3 display: inline-block;

نستخدم هذا الكود في حالة إذا أردنا عمل ميكس بين العناصر ال inline والعناصر ال block
بمعنى ان من خواص العناصر ال inline-block انها:
- تكون على نفس الخط (مثل العناصر ال inline)
- يُمكن ان نُحدد لها قيمه ال height وقيمة ال width (مثل العناصر ال block)

- العناصر الـــــ block يكون عرضها هو العرض الكلي للعنصر لاب ( وسيتم شرح معني العنصر الاب في الدروس القادمة )

- العناصر الـــــ inline و العناصر الـــــ inline-block يتحدد عرضها علي حسب المُحتوي الذي بداخلها

4 display: none;

نستخدم هذا الكود في حالة إذا أردنا حذف العنصر؛ ويُستخدم كثيرا مع لغة ال JavaScript لإخفاء واظهار العناصر عند الضغط على زر معين مثلا.

⚠ خلي بالك يوجد فرق كبير بين ال display: none; وال visibility: hidden; وتم شرح الفرق بينهم بالتفصيل في الفيديو الخاص بهذا الدرس في الدقيقة 13

5 display: flex;

سيتم شرح هذا الكود فى درس منفصل خاص به .

6 display: grid;

سيتم شرح هذا الكود فى درس منفصل خاص به .