نموذج المربع

The CSS Podcast - 001: The Box Model

لنفترض أنّ لديك مقتطف 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 بكسل الذي حدّدته، وسيخرج من العنصر. ما السبب؟

نموذج المربّع هو أساس CSS. إنّ فهم طريقة عمل نموذج المربّع وكيفية تأثّره بالجوانب الأخرى من 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 في المربّع إلى تغيير أي شيء داخل حافة الحدود.

تشبيه مفيد

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

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

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

تصحيح أخطاء نموذج المربّع

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

لتجربة ذلك في Chrome، اتّبِع الخطوات التالية:

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

التحكّم في نموذج المربّع

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

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

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

يحتوي العنصر 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 على كلا الجانبين إلى ذلك العرض. يؤدي ذلك إلى ظهور عرض إجمالي يبلغ 260 بكسل، وهو عبارة عن 200 بكسل للمحتوى + 40 بكسل للمسافة المتروكة + 20 بكسل للحدود.

يمكنك تغيير ذلك من خلال تحديد حجم 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