مشاكل 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 التي تقوم بإزالة العنصر من الصفحة بالكامل وكأنه غير موجود، أي لا تخفيه بل تزيله.