نموذج المربع

بودكاست CSS - 001: نموذج الصندوق

لنفترض أن لديك هذا الجزء من HTML:

<p>I am a paragraph of text that has a few words in it.</p>

بعد ذلك، تكتب CSS لها:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

ينتهي المحتوى بعرض 142 بكسل، بدلاً من 100 بكسل الذي حددته، ينفصل عن العنصر الخاص بك. Why is that?‎

يعد النموذج الصندوقي أساسًا أساسيًا لخدمة مقارنة الأسعار. فهم آلية عمل نموذج المربّع، ومدى تأثره بالجوانب الأخرى لـ CSS، والأهم من ذلك، كيفية التحكم فيه، يمكن أن يساعدك في كتابة CSS أكثر قابلية للتنبؤ.

من المهم تذكُّر أنّ كل ما يعرضه CSS هو مربّع، حتى ولو كان عبارة عن نص فقط أو يتضمّن علامة border-radius، ما يجعلها تبدو كدائرة.

المحتوى والتحجيم

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

يمكنك التحكم في هذا الأمر باستخدام تغيير الحجم الخارجي أو يمكنك استخدام تغيير الحجم الأساسي للسماح للمتصفح باتخاذ القرارات بناءً على حجم المحتوى.

في ما يلي عرض توضيحي أساسي يوضّح هذا الاختلاف:

يحتوي العرض التوضيحي على الكلمات "CSS رائع" في مربع ذي أبعاد ثابتة وحدود سميكة. ولأن للمربع عرض محدد، فإنه بحجم خارجي. هذا يعني أنها تتحكّم في حجم المحتوى الفرعي الخاص بها. مع ذلك، تكون كلمة "رائع" كبيرة جدًا بالنسبة إلى العلبة، لذا فهي تتجاوز مربع حدود المربع الرئيسي (سيتم توفير مزيد من المعلومات حول هذا الموضوع لاحقًا). إحدى الطرق لمنع هذا التجاوز هي السماح بتحديد حجم المربّع بشكل أساسي إما من خلال عدم ضبط العرض، أو في هذه الحالة ضبط width على min-content. تطلب الكلمة الرئيسية min-content أن يكون المربّع مساويًا بعرض الحدّ الأدنى الجوهري للمحتوى فقط (كلمة "رائع"). ويتيح هذا الإجراء احتواء المربع حول النص بشكل مثالي.

إليك مثال أكثر تعقيدًا يعرض تأثير الأحجام المختلفة على المحتوى الحقيقي:

يمكنك التبديل بين وضع المقاسات الأساسية وإيقافها لترى كيف أن المقاسات الخارجية توفر لك مزيدًا من التحكم في استخدام المقاسات الخارجية وتتيح ضبط المقاسات الأساسية للمحتوى. للاطّلاع على التأثيرات، أضِف بضع جمل من النص إلى البطاقة. عندما يكون حجم هذا العنصر خارجيًا، هناك حد لمقدار المحتوى الذي يمكنك إضافته قبل أن يتجاوز حجمه، ولكن هذا لا يحدث عند تفعيل ميزة "الحجم الأساسي".

بشكل تلقائي، يحتوي هذا العنصر على مجموعة width وheight من 400px لكل منهما. تمنح هذه الأبعاد حدودًا صارمة على كل شيء داخل العنصر، والتي يتم احترامها ما لم يكن المحتوى كبيرًا جدًا بالنسبة للصندوق. يمكنك رؤية ذلك عمليًا عن طريق تغيير التسمية التوضيحية أسفل صورة الزهرة إلى شيء يتجاوز ارتفاع المربّع.

مصطلح رئيسي: يحدث الفائض عندما يكون المحتوى كبيرًا جدًا بالنسبة للصندوق الذي يوجد فيه. يمكنك إدارة طريقة معالجة العنصر للمحتوى الكامل باستخدام السمة overflow.

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

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

مناطق نموذج الصندوق

تتكون الصناديق من مناطق نموذجية مميزة وتؤدي جميعها وظيفة محددة.

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

يحيط مربّع المساحة المتروكة بمربّع المحتوى وهو المساحة التي تنشئها السمة padding. نظرًا لأن المساحة المتروكة داخل المربع، تكون خلفية المربع مرئية في المساحة التي يتم إنشاؤها. إذا كان المربّع يحتوي على قواعد كاملة، مثل overflow: auto أو overflow: scroll، ستشغل أشرطة التمرير أيضًا هذه المساحة.

يحيط مربّع الحدود بمربّع المساحة المتروكة، ويتم تحديد مساحته من خلال القيمة border التي تنشئ إطارًا مرئيًا للعنصر. حافة الحد للعنصر هي الحد المسموح به لما يمكنك رؤيته.

أمّا المنطقة الأخيرة، وهي مربّع الهامش، فهي المساحة المحيطة بالمربّع التي تحدّدها قاعدة margin الخاصة بالمربّع. وتشغل خصائص مثل outline وbox-shadow هذه المساحة أيضًا لأنّها مرسومة فوق العنصر ولا تؤثر في حجم المربّع. لا يؤدي تغيير outline-width لـ 200px في المربع إلى تغيير أي شيء داخل حافة الحدود.

تشبيه مفيد

نموذج المربع معقد في الفهم، لذا إليك تشبيهًا لما تعلمته حتى الآن.

في هذا الرسم البياني، لديك ثلاثة إطارات صور مثبَّتة بجانب بعضها البعض على حائط. تتوافق عناصر الصورة داخل الإطار مع نموذج المربع على النحو التالي:

• مربع المحتوى هو العمل الفني.
• صندوق المساحة المتروكة هو لوح التثبيت الأبيض، بين الإطار والعمل الفني.
• ومربع الحدود هو الإطار، مما يوفر حدًا حرفيًا للعمل الفني.
• مربع الهامش هو المسافة بين الإطارات.
• يشغل الظل نفس المساحة التي يشغلها مربع الهامش.

تصحيح أخطاء نموذج الصندوق

توفِّر "أدوات مطوري البرامج في المتصفّح" تمثيلاً بصريًا للعمليات الحسابية للنموذج الصندوقي المحدَّد، ما يساعدك في فهم طريقة عمل نموذج المربّع ومدى تأثيره على الموقع الإلكتروني الذي تعمل عليه.

يمكنك تجربة ما يلي في متصفّحك:

1. افتح "أدوات مطوري البرامج".
2. اختيار عنصر
3. يعرض برنامج تصحيح الأخطاء في نموذج الصندوق.

التحكم في نموذج الصندوق

لفهم كيفية التحكم في نموذج الصندوق، تحتاج أولاً إلى فهم ما يحدث في متصفحك.

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

خاصية واحدة تضبطها ورقة أنماط وكيل المستخدم على display التلقائي للمربّع. على سبيل المثال، في المسار العادي، تكون قيمة display التلقائية للعنصر <div> هي block، وقيمة السمة <li> التلقائية هي list-item، وقيمة السمة <span> التلقائية هي inline.displaydisplay

يتضمن عنصر inline هامش كتلة، لكن العناصر الأخرى لا تلتزم به. في استخدام inline-block، تلتزم عناصر أخرى بهامش الكتلة، لكن العنصر الأول يحافظ على معظم السلوكيات نفسها التي كان بها عنصر inline. يملأ عنصر block المساحة المضمّنة المتاحة تلقائيًا، في حين أنّ حجم عناصر inline وinline-block لا يتجاوز حجم المحتوى الخاص بها.

تضبط ورقة أنماط وكيل المستخدم أيضًا السمة box-sizing التي تحدّد للمربّع كيفية حساب حجم المربّع. تتضمّن جميع العناصر تلقائيًا نمط وكيل المستخدم التالي: box-sizing: content-box;. وهذا يعني أنّه عند ضبط سمات مثل width وheight، تنطبق هذه السمات على مربّع المحتوى. إذا قمت بعد ذلك بتعيين padding وborder، ستتم إضافة هذه القيم إلى حجم مربع المحتوى.

التحقق من فهمك

اختبر معلوماتك بشأن حجم نموذج المربع الذي يؤثر في الخصائص.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

العرض الفعلي لهذا المربّع هو 260 بكسل. بما أنّ لغة CSS تستخدم القيمة التلقائية box-sizing: content-box، يكون العرض المطبّق هو عرض المحتوى، وتتم إضافة padding وborder على كلا الجانبَين. 200 بكسل للمحتوى + 40 بكسل للمساحة المتروكة + 20 بكسل للحدود يجعل العرض الإجمالي مرئيًا 260 بكسل.

يمكنك تغيير ذلك من خلال تحديد مقاس border-box:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

يطلب نموذج المربّع البديل هذا من CSS تطبيق width على مربّع الحدود بدلاً من مربّع المحتوى. وهذا يعني أنّه يتم إدخال border وpadding، ولذلك عند ضبط .my-box على 200px عرضًا، سيتم عرضه بدقة 200px.

يمكنك التحقق من طريقة عمل ذلك في العرض التوضيحي التفاعلي التالي. عند تبديل قيمة box-sizing، تعرض المنطقة الزرقاء خدمة CSS التي يتم تطبيقها داخل المربّع.

*,
*::before,
*::after {
  box-sizing: border-box;
}

تختار قاعدة CSS هذه كل عنصر في المستند وكل عنصر زائف ::before و::after وتطبّق box-sizing: border-box. وهذا يعني أن كل عنصر يستخدم الآن نموذج المربع البديل هذا.

بما أنّ نموذج المربّع البديل يمكن توقّعه بشكل أكبر، غالبًا ما يضيف المطوّرون هذه القاعدة إلى عمليات إعادة الضبط وأدوات التسوية، مثل هذه القاعدة.

المراجع

• مقدمة عن نموذج المربّع
• ما هي أدوات المطوّرين في المتصفّح؟

أوراق الأنماط لوكيل المستخدم

• Chromium
• Firefox
• Webkit