نموذج المربع

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

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

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

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

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

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

في ما يلي عرض توضيحي أساسي يوضّح الفرق:

يتضمّن العرض التوضيحي الكلمات "CSS is awesome" في مربّع بأبعاد ثابتة وحدود سميكة. بما أنّ المربّع له عرض محدّد، يتم تغيير حجمه خارجيًا. وهذا يعني أنّه يتحكّم في حجم المحتوى الثانوي. ومع ذلك، فإنّ الكلمة "رائع" كبيرة جدًا بالنسبة إلى المربّع، لذا فإنّها تفيض خارج مربّع الحدود للمربّع الرئيسي (مزيد من التفاصيل لاحقًا). إحدى طرق منع هذا التجاوز هي السماح بتغيير حجم المربّع داخليًا إما من خلال عدم ضبط العرض أو، في هذه الحالة، ضبط 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، و<li> لها قيمة display تلقائية هي list-item، و<span> لها قيمة display تلقائية هي 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 على كلا الجانبَين إلى ذلك. 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. هذا يعني أنّ كل عنصر يستخدم الآن نموذج المربّع البديل هذا.

بما أنّ نموذج المربّع البديل يمكن أن يكون أكثر قابلية للتوقّع، غالبًا ما يضيف المطوّرون هذه القاعدة إلى عمليات إعادة الضبط والتطبيع، مثل A (more) Modern CSS Reset.

الموارد

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

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

• Chromium
• Firefox
• Webkit