Okuzeka
تطوير الويب · مصطلحات · CSS وتنسيق الصفحات

ما معنى box model؟

المعنى في مجال تطوير الويب مع أمثلة

اسممصطلح شائع

box model: نموذج الصندوق، نموذج الصندوق في CSS

مفهوم في CSS ينص على أن كل عنصر صندوق مستطيل يتكوّن من المحتوى والحشو والحد والهامش، وتحدد هذه الأجزاء مجتمعةً حجمه والمسافات حوله.

طريقة الاستخدام

يظهر هذا المفهوم عندما لا تطابق الأبعاد التوقعات. تضبط مشاريع كثيرة box-sizing: border-box كي يشمل العرض الحشو والحد. وتعرض أدوات المطور في المتصفح نموذج الصندوق للعنصر المحدد.

أمثلة

  1. The card is 20 pixels wider than expected; check the box model in DevTools.

    عرض البطاقة أكبر من المتوقع بعشرين بكسل؛ افحص نموذج الصندوق في أدوات المطور.

    قد يكون الحشو أو الحد مضافًا إلى العرض المحدد، وتُظهر الأداة كيف تكوّن الحجم الكلي.

  2. Once you understand the box model, spacing in CSS makes much more sense.

    ما إن تفهم نموذج الصندوق حتى تصبح المسافات في CSS أوضح بكثير.

    فهم علاقة المحتوى والحشو والحد والهامش يفسر سبب ظهور الفراغات والأبعاد كما هي.

تراكيب شائعة

  • CSS box model
  • box-sizing
  • border-box
  • content box

معنى الكلمة في مجالات أخرى

قد يختلف معنى الكلمة الإنجليزية نفسها من مجال إلى آخر:

مصطلحات أخرى: CSS وتنسيق الصفحات

تدرّب على القراءة المتدرجة

تساعدك القراءة بالمستوى المناسب على تثبيت المفردات الجديدة. اختر كتبًا إنجليزية مجانية: