نموذج المربع

بودكاست CSS - 001: نموذج The Box

لنفترض أن لديك هذا الجزء من 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 للصندوق في المربع لا يغيّر أي شيء داخل حافة الحد.

تشبيه مفيد

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

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

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

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

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

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

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 بكسل. بما أنّ خدمة مقارنة الأسعار تستخدم القيمة التلقائية 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