استثمر للحياة  investolife

نموذج الصندوق  box model

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

هذا و هو  يتكون من 4 اقسام رئيسة وهي :

الهامش (Margin ) : هو مسافة فاصلة بلا خلفية  بين بداية الشاشة و الإطار .

الإطار (Border ) : هو إطار زخرفي للصندوق .

المسافة الفاصلة (Padding ) : هى هامش يفصل بين الإطار و المحتوى .

المحتوى (Content ) : محتوى الصندوق و هو موضوع ظهور  كل ما يكتب من نصوص و روابط  أ و صور .

و هذا يمثل شكل توضيحي لنموذج الصندوق

وهذا شرح تفصيلي

الهامش (Margin ) : يستخدم لترك مسافة فارغة و شفافة بين بداية الشاشة و بداية عرض الصفحة من جهات الاربعة .

فى المثال كتبنا جملتين احدهما بدون هامش و الاخرى بهامش 50 نقطة من اليسار أي انها تيعد عن يسار الشاشة 50 نقطة .

التنفيذ

كما يمكن التحكم فى الهامش من أعلى و اسفل او من اليمين و اليسار فاذا اردنا الهامش من أعلى 100 نقطة و من اليسار 50 نقطة . و بصفة عامة يمكن تحديد الهامش من كل جهة هكذا :

و الافضل جمعهم فى سطر  واحد:

body { margin: 100px 40px 10px 70px; }v

مع مراعة الترتيب

top     right    bottom         left

الإطار (Border ) :

هو إطار زخرفي للصندوق . و يحيط بالمحتوى   ......  راجع اكواد الالوان هنا

هذا مثال يوضح الامر

و هذل مثال يربط بين الهامش و الاطار

انواع الأطر

راجع اكواد الالوان هنا

حمل  المثال

سنلاحظ أننا نستخدم

{ border-width:2px;v border-color:Red;v border-style:solid;} .

غير اننا يمكنا كتابتها هكذا

.

border:2px Red solid ; 

المسافة الفاصلة (Padding )

يمكننا  تحديد المسافة الفاصلة   بنفس الطريقة لمعظم العناصر .

مثال : نريد ان نكتب نص فى إطار و له مسافة بادئة 20 px من اليسار

يمكن تحديد المسافة – و ان كانت -  البادئة للجهات الاربعة للنص كما يمكن تحديدها بالسنتيمتر أو النقطة px

.ex1 {padding:2cm};v

.ex2 {padding:0.5cm 3cm};v

يمكن كتابتها بشكل مختصر

{ padding:10px 20px 30px 40px } ;  

مع مراعاة الترتيب                 

-------------------------------top   right   bottom   left

راجع اكواد الالوان هنا