 |
| صندوق اكواد احترافى |
يعد فهم نموذج الصندوق (Box Model) في CSS أحد الأساسيات التي تحتاج إلى استيعابها لإنشاء تخطيطات فعالة وتصميم عناصر الويب بطريقة منظمة. يمثل هذا النموذج البنية الأساسية التي يمكن من خلالها التحكم في محاذاة العناصر، أبعادها، والمسافات بينها. في هذا المقال، سنلقي نظرة شاملة على نموذج الصندوق، لفهم كيفية عمله واستخدامه لإنشاء تخطيطات معقدة بشكل محترف.
هذا هو شكل صندوق الاكواد وللتحميل
كود
<div class="hello">
للتحميل المباشر
الصناديق الكتلية والسطرية
في CSS، تنقسم الصناديق إلى نوعين رئيسيين هما: الصناديق الكتلية (block boxes) والصناديق السطرية (inline boxes). يكمن الاختلاف بينهما في طريقة تفاعل كل منهما مع تدفق الصفحة وانسيابية العناصر الأخرى المحيطة بهما. إلى جانب ذلك، يتميز كل صندوق بنوعين من العرض: العرض الخارجي (outer display type) والعرض الداخلي (inner display type). فيما يلي نظرة على هذه الأنواع:
الصناديق الكتلية (Block Boxes)
عندما يكون نمط العرض الخارجي للصندوق محددًا بـ `block`، فإنه يتصرف وفق السلوك التالي:
- ينتهي الصندوق بحيث تبدأ العناصر التالية في سطر جديد.
- يمتد عرض الصندوق ليملأ كامل المساحة المتاحة داخل الحاوية التي يحتويها.
- يتم احترام القيم المعرفة لكل من العرض (width) والارتفاع (height).
- تؤثر الحاشيات (padding)، الهوامش (margin)، والإطارات (border) على إزاحة العناصر المجاورة بعيدًا عن الصندوق.
عدد من العناصر مثل `<h1>` و`<p>` يكون لها نمط عرض كتلي بشكل افتراضي، مما يجعلها تأخذ هذه الخصائص تلقائيًا.
الصناديق السطرية (Inline Boxes)
إذا كان نمط العرض الخارجي للصندوق هو `inline`، فإنه ينتهج سلوكًا مختلفًا:
- تبقى العناصر التالية إلى جانبه في السطر نفسه.
- لا يتم تطبيق القيم المعرفة للعرض والارتفاع.
- تُطبق الهوامش، الحاشيات والإطارات الرأسية دون دفع العناصر المجاورة.
- تُطبق الهوامش والحاشيات الأفقية مع تأثير إزاحة على العناصر السطرية الأخرى.
العناصر مثل `<a>`, `<span>`, `<em>`, `<strong>` تُعامل كصناديق سطرية بشكل افتراضي.
الخاصية `display`
يمكن التحكم في نوع الصندوق الذي تتبناه أي عنصر باستخدام الخاصية `display`. بعض القيم الشائعة لهذه الخاصية تشمل: `block` و`inline`. بالإضافة إلى ذلك، يدعم CSS قيمًا أكثر تعقيدًا مثل `flex` و`grid` لتوسيع إمكانيات تصميم التخطيطات.
العرض الداخلي والخارجي في الصناديق
كل صندوق في CSS له نمطان للعرض: خارجي وداخلي. النمط الخارجي يحدد كيفية دمج العنصر مع العناصر المحيطة به، بينما النمط الداخلي يتعلق بكيفية ترتيب المحتوى نفسه داخل حدود الصندوق.
افتراضيًا، يتم ترتيب المحتوى داخل الصندوق بناءً على التدفق الطبيعي للصفحة (Normal Flow). ومع ذلك، يمكن تغيير نمط العرض الداخلي للصندوق باستخدام قيم مختلفة للخاصية `display`. على سبيل المثال:
- عند تعيين القيمة `flex` لنمط العرض الداخلي، يصبح نمط العرض الخارجي هو `block` افتراضيًا، ويتم ترتيب عناصره بشكل مرن. ويستخدم هذا الترتيب بناءً على قواعد Flexbox التي توفر مرونة عالية في إدارة التخطيطات.
- بالنسبة للعناصر الأبناء داخل هذا النوع من الصناديق، فإنها تُعامل كعناصر مرنة يتم ترتيبها وفق قواعد محددة.
مواضيع اخرى قد تهمك ايضا
اجعل شكل مدونتك متميزة وظهور الصفحة الرئيسية متناسقة
انشاء صفحة تقصيرروابط بقاعدة بيانات وتصميم وصفحة وسيطة للاعلانات
سكريبت فهرس ديناميكي على شكل بطاقات يجلب التصنيفات (Labels) تلقائيًا من مدونة بلوجر
ملاحظات إضافية
من المهم عند تصميم التخطيطات فهم كيف يمكن تغيير الأنماط الافتراضية للعناصر. التخطيطات الكتلية والسطرية تمثل أساس التدفق الطبيعي للعناصر في مستندات HTML، وهي قاعدة يجب إتقانها قبل الانتقال إلى تخطيطات أكثر تخصيصًا مثل Flexbox وGrid.
عند تقدمك في التعرف على CSS، ستتعلم المزيد عن القيم الأخرى للخاصية `display`، وكيف يمكن الاستفادة من إمكانياتها لإنشاء تخطيطات ديناميكية ومتطورة.
تعليقات
إرسال تعليق