3.8 KiB
title | localeTitle |
---|---|
Box Model | نموذج الصندوق |
نموذج الصندوق
يعد فهم نموذج صندوق CSS أمرًا أساسيًا حتى تتمكن من تخطيط صفحة الويب بشكل صحيح.
عندما يعرض المتصفح (يرسم) صفحة ويب ، يتم رسم كل عنصر ، على سبيل المثال ، قطعة من النص أو صورة ، كمربع مستطيل يتبع قواعد نموذج صندوق المغلق.
في وسط المربع هو المحتوى نفسه ، والذي يأخذ ارتفاع وعرض معينين. تُعرف هذه المنطقة باسم " منطقة المحتوى" . يمكن تحديد حجم منطقة المحتوى تلقائيًا ، أو يمكنك تعيين حجم الارتفاع والعرض بشكل صريح. (انظر الملاحظة أدناه فيما يتعلق box-sizing
)
حول منطقة المحتوى ، هذه منطقة تعرف باسم منطقة Padding . يمكن أن يكون حجم الحشوة هو نفسه في كل مكان (مع وضع padding
) ، أو يمكنك ضبطه بشكل فردي على padding-top
والسفلية واليمنى واليسرى (مع padding-top
، padding-right
، padding-bottom
padding-left
) .
بعد ذلك ، هناك منطقة الحدود . هذا يخلق الحدود حول العنصر وحشوها. يمكنك تعيين سمك ( border-width
) ، ولون (لون border-color
) ، ونمط (نمط border-style
) للحدود. تتضمن خيارات النمط none
(بلا حدود) ، أو solid
، أو dashed
، أو dotted
، أو غيرها. بالإضافة إلى ذلك ، يمكنك تعيين الحدود على الجوانب الأربعة على حدة ؛ على سبيل المثال ، الحد العلوي مع border-top-width
، border-top-color
border-top-style
لسمك ولون ونمط. (انظر الملاحظة أدناه فيما يتعلق box-sizing
.)
أخيراً ، هناك منطقة الهامش . يؤدي هذا إلى إنشاء مساحة واضحة حول العنصر والحشو والحدود. مرة أخرى يمكنك بشكل فردي تعيين الهوامش العلوية والسفلية واليسرى واليسرى (مع margin-top
margin-right
margin-bottom
margin-left
). تحت ظروف معينة يحدث بهامش الهوامش وقد تتم مشاركة الهوامش بين العناصر المتجاورة.
box-sizing
الملكية الافتراضي لهذه الخاصية هو content-box
. إذا كنت تستخدم الافتراضي ، فإن نموذج الصندوق سيسمح للمؤلف بتحديد حجم منطقة المحتوى. ومع ذلك ، من الممكن استخدام هذه بدلاً من تحديد حجم منطقة الحدود. يتم ذلك عن طريق تغيير الخاصية box-sizing
إلى border-box
. هذا يمكن في بعض الأحيان جعل تخطيطات أسهل. يمكنك تعيين خاصية تغيير box-sizing
لكل عنصر حسب الرغبة.