الويب العربي - [درس مفصل] نموذج الصندوق في CSS

يعتبر نموذج الصندوق في CSS او Box Model من أهم المبادئ الأساسية التي يجب أن يبدأ بها من يريد أن يحترف لغة الأنماط الإنسيابية CSS، ولدى منظمة الويب العالمية مقال موسع عن نموذج الإطار في هذا المجال لمن يريد أن يستفيد أكثر. في درسي هذا سأحاول تلخيص أهم هذه المبادئ وبعد انتهائك من هذا الدرس سوف تتعلم الفرق بين عناصر الكتلة وعناصر السرد، وظائف وخصائص كل من padding، margin، border، background.

من أهم المفاهيم التي يجب أن تعرفها وتحفظها عن ظهر غيب هي أن كل عنصر في HTML عبارة عن صندوق، ولكن الاختلاف هو نوعية هذا الصندوق أو العنصر، حسنا للتوضيح أكثر أنظر إلى الصورة التالية:

كما قلت سابقا فإن كل عنصر من عناصر HTML يعتبره المتصفح صندوق، وهذا الصندوق يكون محاطا بخصائص، كالطول، العرض، الإطار، وهكذا ...

الفرق بين عناصر الكتلة وعناصر السرد
عناصر الكتلة
عناصر الكتلة أو Block elements هي العناصر التي تأخذ كل المساحة في العرض وتبدأ وتنتهي بسطر جديد، أي أنها تأخذ الحيز الكامل في المكان الموضوعة فيه من ناحية العرض مثل <p> أو <div> وتبدأ بسطر جديد من العناصر السابقة لها وتجبر العناصر اللاحقة بالنزول إلى سطر جديد من دون الحاجة إلى وسم مثل <br> ليفصل بينهم.

هذه العناصر يمكنها أن تحتوي عناصر كتلة أخرى أوعناصر سرد Inline elements، ويمكن التحكم بأبعادها من طول و عرض وهامش وحشو.

عناصر السرد
عناصر السرد أو Inline elements دائما ما تكون متحاذية بين بعضها البعض حتى تكون على نفس السطر مع النص، مثال <a> أو <span> حيث أنها لا تخرج عن النص أو المكان الموضوعة فيه. ولا يمكن التحكم بأبعاد هذه العناصر سواء من ناحية العرض أو الطول لأنها تأخذ أبعاد النص التي تحتويه.

يمكن لعناصر السرد أن تحتوي على عناصر سرد أخرى لكنها لا يمكن أن تحتوي على عناصر كتلة.

"الهدية"
الآن وبعدما عرفت الفرق بين عناصر HTML المختلفة ننتقل إلى الخصائص الأساسية لنموذج الصندوق والتي يمكنك من خلالها التحكم في موضع وشكل كل عنصر من عناصر HTML، سأحاول أن أشرح هذه الخصائص بمثال بسيط، تخيل أنك اشتريت هدية لمن تحب، ألا تريد أن تقدمها في أحلى صورة؟

منع احتكاك الهدية بالعلبة
خاصية padding تهتم بحشو الفراغ بحشو شفاف بين المحتوى والإطار الخارجي للصندوق بسمك محدد بحيث يبتعد المحتوى عن الإطار. ولخاصية padding أربع جهات، فوق، يمين، يسار، وتحت، وهناك طرق مختلفة لكتابة هذه الخاصية في CSS، فمن الممكن كتابة كل على حدى، أو كتابتهم باختصار:

كود:

.box-model {

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

}

الطريقة المختصرة هي كتابة الجهات في سطر واحد بالترتيب التالي: فوق 10px، يمين 20px، تحت 10px، يسار 20px، وللتوضيح أكثر سيكون كتابة المثال السابق كالتالي:

كود:

.box-model {

padding: 10px 20px 10px 20px;

}

وهناك أيضا طريقة مختصرة أكثر وهي أن تختصر الأربع جهات في جهتين، ويكون كتابة الطريقة: فوق تحت 10px، يمين يسار 20px، كتابة نفس المثال بهذه الطريقة:

كود:

.box-model {

padding: 10px 20px;

}

طريقة الكسالى، اكتب قيمة واحدة ودع الباقي على المتصفح، حيث أن هذه القيمة تحدد جميع الاتجاهات:

كود:

.box-model {

/* top = 10px, right = 10px, bottom = 10px, and left = 10px */

padding: 10px;

}

اختر العلبة جيدا
background-color و background-image يهتمان بلون وصورة الخلفية للصندوق، ويمكنك استخدام هاتين الخاصيتين معا، بحيث يكون لون الخلفية خلف الصورة.

كود:

.box-model {

background-color: #000;

background-image: url(images/bg.png);

}

الهدية في العلبة
الآن وبعدما انتهينا من حشو المحتوى وإبعاده عن إطار الصندوق، واخترنا لون وصورة للخلفية، تبقى أن نضع اللمسة الأخيرة وهي border أو الإطار للصندوق، حيث أن تطبيق الإطار يكون خارج الحشوة.

كود:

.box-model {

border: 3px solid #000;

}

ضعها في مساحة واسعة
أصبح المحتوى جاهزا للتقديم، وتبقى فقط أن نضعه في مساحة واسعة باستخدام margin أو الهامش، حيث تتيح لك هذه الخاصية إبعاد الصندوق كاملا في كل الجهات. وطريقة الكتابة تشبه طريقة كتابة الحشو padding مع اختلاف بسيط وهو السماح بأخذ قيم سالبة negative values.

كود:

.box-model {

margin: 8px 12px 7px 5px;

}

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

أسوأ الاحتمالات ...
هناك احتمال قائم كما ذكرت في النقطة السابقة أن "الهدية" أو الصندوق لن يظهر بالصورة المطلوبة في بعض المتصفحات لعدم التزامهم بالمعايير الصحيحة، وللتحديد أكثر، متصفح الانترنت اكسبلورر 6 وأقل، والموضوع في هذا المجال قد يحتاج إلى مقال آخر ولكن ببساطة لاستخدام نموذج الصندوق بالشكل الصحيح على الانترنت اكسبلورر 6 عليك بالتعريف الصحيح لنوع المستند أو ما يسمى Document Type Definition في أعلى الصفحة ولكن للأسف انترنت اكسبلورر أقل من 6 سيعرض الصندوق بشكل خاطئ.

---------------------------------------

المصدر:
[المشروع - مجتمع مطوري المواقع]
للكاتب: عبدالرحمن العتيبة