تعتبر خاصية display من اهم خصائص css أهمية للتحكم فى تخطيط شكل الصفحة. وهي مسئولة عن طريقة ظهور العنصر داخل الصفحة. وتحديدا علي يظر العنصر علي نفس السطر او يفرض سطر جديد.  وكل عنصر element  له قيمة افتراضية لـ display حسب نوعة وأغلب قيم display استخداما أم block و inline  و none  تعال نتعرف علي شرح display في css :

أعرض العنصر علي هيئة مربع او block:

شرح display في css
شرح display في css

اعرض العنصر علي السطر او inline:

كما اشرنا كل عنصر له قيمة افتراضية للخاصية display وتذكر دائما ان يمكنك تغيير القيمة فى اي وقت. وأعتقد من غير المفيد جعل div عنصر سطري بقيمة inline. لكن بأمكانك ان تستغل هذة الفكرة فى عرض العناصر علي الشاشة بشكل يخدم الصفحة باحترافية والمثال الشهير تحويل قائمة الترقيم الرقمي او النقطي من كونها تظهر علي شكل رأسي block اي عنصر بعد عنصر الي قائمة ترقيم تظهر علي شكل افقي inline وطبعا تضع عليها بعض تنسيقات css وتصبح قائمة رائعة.

تعني ان يبدو العنصر كما لو كان كلمة فى سطر تلتف حولها كلمات وصور و اي عناصر اخري. <spain/>مثل هذة<spain> بدون فرض سطر جديد علي الفقرة والبدء من اول السطر. كما تري فى الروابط (عنصر a ) عندما تضعها داخل الفقرات او السطور فانها لا تؤثر علي شكل السطر وتقوم بوظيفتها

ﻻتعرض العنصر علي الشاشة او none:

من قيم خاصية display الاخري قيمة none وتستخدم بشكل عام لأخفاء وإظهار العناصر فى الصفحة بدون حذف العنصر او انشاءة من جديد. ومن بعض العناصر التي تأخذ القيمة none بشكل فتراضي: script .

وتختلف قيمة none عن visibilty ان ضبط disply بــ none يعني اخفاء العنصر بما فيها المساحة التي يستغلها كما لو كان العنصر غير موجود بالصفحة من الاساس. اما ضبط visiblitly بــ hidden سوف تخفي العنصر من الشاشة بدون اخفاء المساحة التي كان يستغلها علي الصفحة. يمكنك اختبار الفرق علي اي عنصر بتبديل القيم قم بذلك علي سبيل التمرين.

قيم خاصية display الاخري:

هناك العديد من قيم display مثل: list-item و table. والقائمة الكاملة لها من هنا. أن شاء الله سوف نناقش قيمتي inline-block و flex لاحقا.

المزيد:

كما اشرنا كل عنصر له قيمة افتراضية للخاصية display وتذكر دائما ان بمقدورك تغيير القيمة فى اي وقت. وأعتقد من غير المفيد جعل div عنصر سطري بقيمة inline. لكن بمقدورك ان تستغل هذة الفكرة فى عرض العناصر علي الشاشة بشكل يخدم الصفحة باحترافية والمثال الشائع تحويل قائمة الترقيم الرقمي او النقطي من كونها تظهر علي شكل رأسي block اي عنصر بعد عنصر الي قائمة ترقيم تظهر علي شكل افقي inline وطبعا تضع عليها بعض تنسيقات css وتصبح قائمة رائعة.

 

رابط مختصر : https://www.aqwce.com/w9Rbr