بودكاست 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
للصندوق في
المربع لا يغيّر أي شيء داخل حافة الحد.
تشبيه مفيد
فإن نموذج المربع صعب الفهم، لذا إليك تشبيهًا لما تعلمته حتى الآن.
في هذا الرسم التخطيطي، لديك ثلاثة إطارات صور مثبتة بجوار بعضها البعض على حائط. تتوافق عناصر الصورة داخل الإطار مع نموذج المربع على النحو التالي:
- مربّع المحتوى هو العمل الفني.
- صندوق المساحة المتروكة هو لوحة تثبيت بيضاء، بين الإطار والعمل الفني.
- مربع الحدود هو الإطار الذي يوفر حدًا حرفيًا للعمل الفني.
- مربع الهامش هو المسافة بين الإطارات.
- ويشغل الظل نفس المساحة التي يشغلها مربع الهامش.
تصحيح أخطاء نموذج المربّع
تعرض "أدوات مطوري البرامج في المتصفح" تمثيلاً بصريًا لنموذج المربّع الخاص بالمربّع الذي تم اختياره العمليات الحسابية، والتي يمكن أن تساعدك على فهم كيفية عمل نموذج الصندوق وكيف يؤثر على موقع الويب الذي تعمل عليه.
يمكنك تجربة ما يلي في متصفّحك:
- افتح "أدوات مطوري البرامج".
- اختيار عنصر
- اعرض برنامج تصحيح أخطاء نموذج الصندوق.
التحكّم في طراز الصندوق
لفهم كيفية التحكم في نموذج المربع، تحتاج أولاً إلى فهم ما في متصفحك.
يطبِّق كل متصفح ورقة أنماط وكيل مستخدم على مستندات 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; }
من وجهة نظرك، ما مدى اتساع نطاق .my-box
؟
العرض الفعلي لهذا المربع هو 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
.
وهذا يعني أن كل عنصر يستخدم الآن نموذج المربع البديل هذا.
ونظرًا لأن نموذج الصندوق البديل يمكن أن يكون أكثر توقعًا، غالبًا ما يضيف المطوّرون هذه القاعدة لإعادة الضبط على عمليات الضبط والعمليات، مثل هذه القاعدة.