CSS صندوق نموذج

صندوق CSS نموذج

ويمكن اعتبار كل عناصر HTML مربعات. في CSS، ويستخدم مصطلح "نموذج الصندوق" عندما نتحدث عن تصميم وتخطيط.

نموذج الصندوق المغلق هو في جوهره المربع الذي يلتف حول كل عنصر HTML. وهو يتألف من: هوامش والحدود والحشو، والمحتوى الفعلي.

توضح الصورة أدناه نموذج الصندوق:

شرح أجزاء مختلفة:

نموذج الصندوق يسمح لنا لإضافة حدود حول العناصر، وتحديد المسافة بين العناصر.

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

من أجل وضع العرض والارتفاع عنصر بشكل صحيح في جميع المتصفحات، تحتاج إلى معرفة كيفية عمل نموذج الصندوق.

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

نفترض أننا نريد أن أسلوب ل <div> العنصر أن يكون العرض الكلي 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

هنا الرياضيات:

320px (العرض)
+ 20px (يسار + يمين الحشو)
+ 10px (يسار + يمين الحدود)
+ 0px (يسار + الهامش الأيمن)
= 350px

ينبغي أن تحسب إجمالي عرض عنصر من هذا القبيل:

العرض الكلي عنصر = العرض + الحشو الأيسر + الحشو المناسب + الحد الأيسر + الحد الأيمن + الهامش الأيسر + الهامش الأيمن

ينبغي أن تحسب ارتفاع إجمالي عنصرا من هذا القبيل:

ارتفاع إجمالي العنصر = ارتفاع + الحشو كبار + الحشو السفلي + الحد العلوي + الحد السفلي + الهامش العلوي + الهامش السفلي

	ملاحظة لشركة آي إي القديمة: إنترنت إكسبلورر 8 والإصدارات السابقة، وتشمل الحشو والحدود في width الممتلكات. لإصلاح هذه المشكلة، إضافة <!DOCTYPE html> إلى صفحة HTML.