ما هو نموذج الصندوق ؟
يتكون كل عنصر يمكن عرضه على صفحة الويب من صندوق أو أكثر من الصناديق المستطيلة. يصف نموذج الصندوق في لغة CSS عادةً كيف يتم وضع هذه الصناديق المستطيلة على صفحة ويب. يمكن أن تحتوي هذه الصناديق على خصائص مختلفة ويمكن أن تتفاعل مع بعضها البعض بطرق مختلفة ، كل صندوق يحتوي على منطقة محتوى content area ومساحة اختيارية محيطية تتكون من الحدود border والهوامش margin والحواشي padding .
يوضح المخطط التالي كيف تحدد خصائص CSS العرض width والارتفاع height والحواشي padding والحدود border والهوامش margin مقدار المساحة التي يمكن للعنصر أن يأخذها على صفحة الويب.
الحواشي Padding هي المساحة الشفافة بين محتوى العنصر وحدوده border(أو حافة الصندوق ، إذا لم يكن له حدود) ، في حين أن الهوامش margin هي المساحة الشفافة حول الحدود border.
أيضًا ، إذا كان العنصر يحتوي على لون الخلفية background color ، فسيكون هذا اللون مرئيًا من خلال منطقة الحواشي الخاصة بالعنصر. تظل منطقة الهوامش شفافة دائمًا ، ولا تتأثر بلون خلفية العنصر ، ومع ذلك ، فإنها تتسبب في رؤية لون الخلفية للعنصر الأب من خلالها.
عرض وارتفاع العناصر
عادة عندما تقوم بتحديد عرض عنصر وارتفاعه باستخدام الخصائص width و height ، في الواقع فإنك تقوم فقط بتحديد عرض وارتفاع منطقة المحتوى لهذا العنصر. يعتمد العرض والارتفاع الفعليان لصندوق العنصر على عدة عوامل.
يتم حساب المساحة الفعلية التي قد يشغلها صندوق العنصر على صفحة الويب على النحو التالي:
| مساحة الصندوق | خصائص CSS |
|---|---|
| العرض الكلي | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| الارتفاع الكلي | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
ستتعرف على كل هذه الخصائص بالتفصيل في الدروس القادمة.
لنجرب الآن المثال التالي لفهم كيفية عمل نموذج الصندوق في لغة CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>نموذج الصندوق</title>
<style>
div {
width: 300px;
height: 200px;
padding: 15px;
border: 10px solid black;
margin: 20px auto;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget.</div>
</body>
</html>
المخرجات
في نموذج الصندوق ؛ منطقة المحتوى الخاصة بصندوق العنصر هي المنطقة التي يظهر فيها محتواها ، مثل النص والصورة والفيديو وما إلى ذلك. قد تحتوي أيضًا على صناديق عناصر فرعية (العناصر الأبناء).