على الرغم من احتمال سماعك لنفس الكلمات: كل عنصر في تصميم المواقع و الويب هو مربع مستطيل او box model. كانت هذه لحظة “وجدتها!” التي ساعدتني حقاً في فهم تصميم الويب القائم على CSS وإنجاز المخططات التي أردت إنجازها. لقد تحدثنا عن موضع (position) هذه الصناديق قليلاً، وعن سلوكها.
ما لم نتحدث عنه كثيرا هو الصندوق نفسه. كيف يتم حساب حجم المربع بدقة؟
إليكم الرسم التخطيطي:
لو كنت من مستخدمي Firebug قد تكون معتادًا على هذا الرسم البيانيو المعروف ب Firebug’s Box Model ، الذي يقوم بعمل جيد من خلال عرض الأرقام التي تؤثر على أي مربع في الصفحة:
لاحظ في كلا المثالين أن الهامش الأبيض فريد، من حيث أنه لا يؤثر على حجم المربع بحد ذاته، لكنه يؤثر على المحتوى الآخر المتفاعل مع الصندوق أو المربع، وهذا جزء مهم من نموذج صندوق CSS (CSS Box Model).
يتم حساب حجم الصندوق نفسه هكذا:
| العرض | العرض + حشوة اليسار(padding-left) + حشوة اليمين (padding-right) + حد اليسار (border-left) + حد اليمين (border-right). |
| الارتفاع | الارتفاع + الحشوة العلوية (padding-top) + الحشوة السفلية (padding-bottom)+ الحد العلوي (border-top) + الحد السفلي (border-bottom). |
ماذا لو لم يتم إعطاء هذه القيم قيمة ابتدائية؟
لو الحشو (padding) و الحد (border) لم يعطى لهم قيمة ابتدائية، ستكون قيمتهم صفر ( كما لو كنت تستخدم خاصية الاستعادة في CSS (reset)) أو ستكون قيمتهم بالقيمة الافتراضية التي يعطيها المتصفح (بالعادة ليست صفر، خاصة عناصر النموذج (form)، غالباً لاتكون على إعداد reset).
إذا كان عرض الصندوق غير معطى قيمة ابتدائية ( والصندوق عنصر من مستوى كتلة (block))، فإن الأمور تصبح أكثر غرابة. دعونا نبدأ بذلك، ثم ننتقل إلى أشياء أخرى من الجيد معرفتها حول نموذج الصندوق (box model).
قيمة العرض الافتراضية لصناديق مستوى الكتلة (block level)
إذا إعطاء قيمة للعرض، والصندوق له موضع ثابت (static position) أو نسبي (relative position)، فإن العرض سيبقى 100% في العرض، والحشو (padding) والحدود (borders) سيدفعان الصندوق إلى الداخل بدلا من الخارج. ولكن إذا قمت بنفسك بضبط عرض الصندوق بحيث يكون 100%، فإن الحشو (padding) سيدفع الصندوق إلى الخارج كالوضع الطبيعي.
الدرس هنا هو أن العرض الافتراضي للصندوق ليس 100% بل إنه يمثل “ما تبقى”. وهذا مهم أن تعرفه، حيث أن هناك الكثير من الظروف التي يكون فيها من المفيد للغاية إما ضبط العرض أو عدم ضبطه.
أكثر شيء متعب أجده مع هذا، هي عناصر textarea، والتي تحتاج إلى جهد لضبط العرض، ليواجه الخاصية “cols”، ولا يمكن أن تحتوي على عناصر أبناء أو تابعين. لذا فكثيراً ما تحتاج إلى ضبطها لـ 100% بشكل صريح، ومع ذلك فإن الحشو (padding) يجعلها أكبر مما تحتاج. في بيئة العرض الثابت، غالباً ما نلجأ إلى كتابة العرض بالبكسل بحسب ما يلاءم. لكن لا يمكننا عمل ذلك في بيئات العرض المرنة (fluid).
الصناديق المُطلقة (absolute boxes) بدون عرض
الصناديق الموضوعة بشكل مطلق (absolute) والتي لم يتم تحديد عرض لها، لها سلوك مغاير. العرض هو فقط العرض الذي يجب أن يكون فيه المحتوى. فإذا كان الصندوق يحتوي على كلمة واحدة، فإن الصندوق يكون بعرض تلك الكلمة. وإذا زادت إلى كلمتين، فإن العرض سيزداد بحجم الكلمتين.
يجب أن يستمر هذا التزايد حتى يصبح الصندوق بعرض 100% من عرض الأب أو الأصل (أقرب أب له وضع نسبي (relative position)، أو نافذة المتصفح) ثم يبدأ في الالتفاف. تشعر أنه من الطبيعي أن تتمدد المربعات رأسياً لتستوعب المحتوى، لكن تشعر أنه من الغريب أن يحدث أفقياً. إن هذا الشعور الغريب له ما يبرره، حيث أن هناك الكثير من الأسئلة حول كيفية تعامل المتصفحات المختلفة مع هذا الأمر، ناهيك عن حقيقة أن النص يختلف من منصة لأخرى.
الصناديق الطافية (floated) بدون عرض
نفس السلوك يتم رؤيته مع عناصر طافية (floated elements) بدون عرض. يكون الصندوق على قدر المساحة التي يحتاج إليها لاستيعاب المحتوى، بما يصل إلى عرض العنصر الأب أو الأصلي (لا يحتاج إلى أن يتم وضعه بشكل نسبي (relative)). ونظراً للطبيعة الهشة لهذه الصناديق التي ليس لها عرض، فإن الدرس الذي يتعين علينا أن نستخرجه هنا هو عدم الاعتماد عليها في سيناريوهات المهام المهمة والحرجة، كما هو الحال في تخطيط الصفحات عموماً. إذا قمت بوضع عامود بشكل طافي (float) لتستخدمه كشريط جانبي، واعتمدت على عنصر بداخله (مثل صورة) ليكون مسؤولاً عن الاحتفاظ بعرضه، فإنك بالحقيقة تقوم بعمل مشكلة.
العناصر المضمنة (inline elements) هي صناديق أيضاً
كنا نركز نوعاً ما على الصناديق كعناصر على مستوى الكتلة (block level) في هذه المقالة. من السهل التفكير في عناصر مستوى الكتلة كصناديق، لكن العناصر المضمنة (inline elements) هي أيضا صناديق. فكروا بها كمستطيلات طويلة ونحيلة حقاً، ذلك يحدث حقاً ليغلف كل سطر. السطور يمكنها الحصول على هامش (margin)، و حشو (padding)، و حدود(border) مثل أي صندوق آخر.
تغليف السطر هو ما يجعل الأمر مُربكاً. الهوامش (margins) على اليسار كما تلاحظ في الاعلى تدفع الصندوق لليمين كما تظن، لكن هذا يحدث للسطر الأول فقط لأنه بداية الصندوق. يتم تطبيق الحشو (padding) كما يجب أسفل وأعلى النص، وعندما يتم تغليفه يتجاهل السطر الذي يعلو حشوه (padding)، ويبدأ من حيث يُملي ارتفاع الخط عليه أن يبدأ. تم تطبيق ذلك بخلفية شفافة لتعرف كيف يعمل بشكل أكثر وضوحاً.
انظر إليه بعينيك
تُريد أن تري كل صندوق في الصفحة؟ جرب أن تضع هذا الكود في ملف الCSS الخاص بك:
