مشاكل display

يوجد دروس في أساسيات الويب الواجهة الأمامية دروس مثل:

•  تحديد المواضع 
•  تخطيط Flex Box 
• طرق العرض Display modes 

كما انه يوجد مقالات عن الموضوع ان أردت قرائة الأمر:

كل عنصر HTML هو بمثابة صندوق، وخاصية display تحدد كيف سيتصرف وكيف سيؤثر على الصناديق التي حوله، وأهم القيم هي:

1- display: block حيث تحول العنصر إلى نوع block  والذي يستحوذ على كامل عرض السطر المتاح له ويبدأ دائماً على سطر جديد، وله الخصائص التالية:

• يمكنك تحديد width و height له.
• تستطيع تطبيق margin و padding عليه من كل الجهات.
• يدفع العناصر التي تأتي بعده إلى سطر جديد.

2-  display: inline تحول العنصر إلى نوع inline والذي يستحوذ فقط على المساحة التي يحتاجها بقدر المحتوى الذي بداخله، ويبقى على نفس السطر مع العناصر الأخرى.

وخصائصه:

• لا يمكنك تحديد width أو height له حيث يتجاهلهما.
• margin-top و margin-bottom ليس لهما تأثير.
• يبقى بجانب العناصر الأخرى في نفس السطر.

3- display: inline-block تحول العنصر إلى مزيد بين النوعين السابقين، بحيث يبقى على نفس السطر مع العناصر الأخرى مثل inline، ولكن تستطيع تحديد width و height و margin و padding له بالكامل مثل block.

وتستخدم ذلك في حال تريد عناصر بجانب بعضها البعض ولكن مع التحكم الكامل في أبعادها.

ولكن ستعتمد على ما سبق بنسبة قليلة، فحاليًا flexbox وgrid هما الأساس، أي القيم التالية:

• display: flex
•  display: grid

وبالطبع تحتاج إلى دراسة الأساسيات الخاصة بهم لتستطيع استخدامهم بكفاءة.

وتوجد قيمة أخيرة وهي . display: none التي تقوم بإزالة العنصر من الصفحة بالكامل وكأنه غير موجود، أي لا تخفيه بل تزيله.

إن خاصية display في CSS هي واحدة من أهم الخصائص التي تتحكم في كيفية عرض العناصر في صفحة الويب لديك وفهمها جيدا سيساعدك كثيرا في تنسيق وتصميم صفحاتك.

ففي كل عنصر HTML له قيمة display افتراضية block أو inline وخاصية display تسمح لك بتغيير هذا السلوك الافتراضي.

وإليك القيم لتلك الخاصية :

• display: block;

حيث العناصر التي تأخذ هذه الخاصية تسمى عناصر كتلية و خصائصها:

1. تبدأ دائما على سطر جديد.
2. وهي تشغل كامل عرض الحاوية المتاحة لها دونالنظر إلى محتواها حتى لو كان النص قصيرا.
3. يمكن تحديد width و height و margin و padding لها من جميع الاتجاهات.

ونستخدمها للعناصر الرئيسية في هيكل الصفحة التي نريد أن تأخذ مساحة كاملة وتكون منفصلة عن غيرها. فلو وضعت عنصرين <div> تحت بعضهم كل منهم سيكون في سطر منفصل.

• display: inline;

والعناصر التي تأخذ هذه الخاصية تسمى عناصر مضمنة وخصائصها:

1. لا تبدأ على سطر جديد بل تظهر بجانب العناصر الأخرى في نفس السطر.
2. تشغل فقط العرض والمساحة الخاصة بالمحتوى.
3. لا يمكن تحديد width و height لها.

ونستخدمها لتنسيق جزء من النص داخل عنصر آخر دون أن يأخذ سطر منفصل.

• display: inline-block;

وهذه القيمة تجمع بين مميزات الخاصية block و inline وخصائصها:

• مثل inline: لا تبدأ على سطر جديد وتصطف بجانب العناصر الأخرى.
• مثل block: يمكنك تحديد width و height و margin و padding لها من جميع الاتجاهات.

ونستخدمها عندما نريد عدة عناصر بجانب بعضها في سطر واحد ولكن نحتاجها في نفس الوقت للتحكم في أبعادها ومساحاتها الفارغة.

• display: none;

هذه القيمة تقوم بإخفاء العنصر تمامًا من الصفحة وخصائصها:

1. العنصر يختفي وكأنه لم يكن موجودا في الأساس.
2. المساحة التي كان يشغلها العنصر تحذف، وتتحرك العناصر الأخرى لتملأ هذا الفراغ.

• display: flex;

عندما نضع display: flex على عنصر حاوية (parent) فإن العناصر التي بداخله (children) تصبح مرنة (flex items) وهذا يمنحك تحكم كامل و قوي في محاذاتها وترتيبها وتوزيع المسافات بينها.

• display: grid;

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