المعلوماتية > برمجيات
نموذج الصندوق في تصميم صفحات الويب
منذ عدّة سنواتٍ ومع بَدِءِ تطوّرِ صناعةِ الويب والصّفحاتِ والحاجةِ لتّحسينِ مظهرِها كان استخدامُ الـ CSS ضرورةً ملحّةً ولكنَّ المشاكلَ كانت تظهرُ دائماً فيما يخصّ توضّع المحتوى داخل الصفحةِ وتقسيمه لأجزاءٍ ودائماً كان الجوابُ عن السّؤال حولَ سبب ذلك بأنَّ CSS هي لغةٌ لتحسينِ الشّكل وليست لغةً لإدارةِ التّنسيقِ وتوضّعِ العناصر.
إنَّ الحاجةَ لذلك جعلت المطوّرينَ يستخدمون الإمكانياتِ الموجودةِ لتوضّعِ العناصر بالشكلِ الأمثلِ، و إحدى أهمِّ الجوانب في عمليّة التّوضّع هذه هي ما يُعرَفُ بنموذجِ الصّندوقِ (Box-Model).
حتّى نتعرف على النّموذج بالشّكلِ الأمثلِ فيجب أن نتخيلَ العناصرَ عبارةً عن صناديقَ تصطفُّ إلى جانبِ بعضِها البعض ضمن صفحة الويب ويحتوي كلُّ صندوقٍ على مجموعةٍ من الخصائصِ الّتي تتحكم بشكله، ويمكن التّحكمَ بهذه الصّناديق في CSS من خلالِ نموذجِ الصّندوق (Box-Model) و يتألّف هذا النّموذج من 4 مناطقَ سنتعرف عليها أوّلاً قبل الانتقالِ للتّفاصيل، وتُعرّفُ هذه المناطق من الدّاخلِ إلى الخارجِ كالتّالي:
المنطقة الأولى هي منطقةُ المحتوى (Content Area) و هي ببساطةٍ تمثّل المحتوى الحقيقيّ للعنصر سواءً كان صورةً أو نصّاً أو رابطاً وتكون أبعادُ هذه المنطقةِ معرفةً تِبعاً لحجمِ المحتوى.
ولجعل الصّورة أسهل نسبيّاً سنتحدث عن المنطقة الثّالثة والّتي تمثلُ حدود العنصر(Border Area) وهي إضافةُ حدٍ خارجيٍّ للعنصر على شكل خليّةٍ أو إطارٍ محيطٍ به و نتحكم بحجم هذه المنطقة من خلال عَرْضِ الإطارِ (Border Width) الّذي نحدده للعنصر.
بالعودة للمنطقة الثّانية والّتي يمكن تسميتها بمنطقةِ الحشوِ(Padding Area) فهي تمثّل المنطقةَ بين المحتوى الأساسيّ والإطارِ المحيطِ بالعنصر، وتُتيحُ لنا (CSS) التّحكمَ بالحشوِ من الجهاتِ الأربعة.
المنطقة الرّابعة والأخيرة هي منطقةُ الهامشِ (Margin Area) وهي تمثّل المنطقةَ الخارجيّةَ الّتي تفصل بين إطارِ العنصرِ والعناصرِ الأخرى المجاورةِ له، وكما هي الحالةُ في الحشو فإنَّنا نستطيعُ أن نتحكمَ بالهامشِ من الجهاتِ الأربعة.
ولترسيخِ المفاهيمِ السّابقةِ سنعتبرُ أنّ المحتوى الّذي لدينا هو عبارةٌ عن كرةٍ نريدُ أن نضعَها في صندوقٍ يمثّلُ الحدودَ أو الأطرَ (Borders)، فعندها يكونُ الفراغُ بين الكرةِ وجدران الصّندوقِ هو الحشوُ (Padding). والفراغُ المحيطُ بالصّندوقِ والّذي يفصله عن بقيةِ الأجسام يمثّل الهامش (Margin).
كيف يمكن التّفريقُ بين الحشوِ والهامشِ دون وجود الإطار؟
في حال عدم تطبيقنا لحدودٍ أو إطارٍ حولَ عنصرٍ ما فإنَّه سيصعبُ علينا التّفريقَ بين الحشوِ والهامشِ، والفرقُ الأساسيُّ بينهما أنَّه عندما نحدد خلفيّةً للعنصرِ فإنَّ الخلفيّةَ ستظهُر في منطقةِ الحشوِ ولن تظهرَ في منطقةِ الهامشِ.
تقلص الهامش (Margin Collapsing)
في بعضِ الأحيانِ عندما تقومُ بتطبيقِ هوامشَ على عناصرَ من الأعلى والأسفل بحيث وعلى سبيلِ المثالِ تُطبّق على العنصر الأوّل 40 بكسل كهامشٍ سفليٍّ والثّاني 20 بكسل كهامشٍ علويٍّ فإنَّك تتوقّع أن تكون المسافةُ الفاصلةُ بينَهما 60 بكسل ولكنّ النّاتج يظهر لك أنّه 40 بكسل فقط. و هذا ما يُعرَفُ بتقلّصِ الهامشِ (Margin Collapsing) وتُطبّقُ هذه الحالةُ على الهوامشِ العموديّةِ فقط وفي ثلاث حالاتٍ هي:
· في حال كان لدينا عناصر متتاليةٍ على نفس المستوى و لها ذات العنصر الأب (العنصر الذي يحتويها).
· البلوكات الفارغة (المناطق الفارغة) الّتي لا تحتوى على أيّ محتواً أو ارتفاعٍ أو إطارٍ أو حشوٍ.
· إذا كان لا يوجد أيّ محتواً أو إطارٍ أو حشوٍ يفصل بين الهامشِ العُلويِّ لعنصرٍ والهامشِ العُلويِّ لأب ذلك العنصر.
حساب المساحة الّتي يشغلها العنصر:
في الحالةِ التّقليديّةِ عندما نقومُ بتحديدِ طولِ وعرضِ عنصرٍ ما فإنّ الطّول والعرض اللّذين نحددهما سيُعطيان مساحةَ منطقةِ المحتوى وبالتّالي فإنّ المساحةَ الكاملةَ الّتي يشغلُها نموذج الصّندوقِ لهذا العنصرِ تكون:
المساحة الكاملة = الأبعاد الّتي قمنا بتحديدها (المحتوى) + الحشو + الإطار + الهامش
وبالطّبع فإنّ ذلك سببُ الكثيرِ من المشاكلِ في السّابق من ناحيةِ الحساباتِ المُعقدةِ الّتي احتاجها المُطوّرُ لتنسيقِ المساحةِ الكاملةِ الّتي سيشغلُها هذا العنصر.
ومع النّسخةِ الجديدةِ لـ (CSS3) تمَّ إضافةُ خاصيّةٍ جديدةٍ هي (Box-sizing)، تُتيحُ لنا هذه الخاصيّة التّحكّمَ بالمساحةِ فهي تأخذُ القيمةَ (Content-box) في الحالةِ الافتراضيّةِ المشابهةِ للحالةِ السّابقةِ، وتأخذُ قيمة (Border-Box) وفي هذه الحالة فإنّنا عندما نحدّد طولَ وعرضَ العنصرِ فذلك سيشملُ كلَّ المساحةِ الّتي يشغلها كلٌّ من المحتوى + الحشو + الإطار، أي سيتّم حسابُ المساحةِ الكاملةِ لنموذجِ الصّندوقِ كالتّالي:
المساحة الكاملة = الأبعاد الّتي قمنا بتحديدها + الهامش
سهّلت هذه الخاصيّة عملَ المطوّرين كثيراً وذلك بالابتعادِ عن الحساباتِ المعقدةِ والتّركيزِ فقط على مقدار الهامش الّذي سيُضافُ للأبعادِ الّتي قام بتحديدها.
المصادر: