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

برمجة و تصميم و تطوير المواقع

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

حجم الخط

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

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

 

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

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

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

  •  الهامش (Margin ) : هو مسافة فاصلة بلا خلفية  بين بداية الشاشة و الإطار .
  •  الإطار (Border ) : هو إطار زخرفي للصندوق .
  •  المسافة الفاصلة (Padding ) : هى هامش يفصل بين الإطار و المحتوى .
  •  المحتوى (Content ) : محتوى الصندوق و هو موضوع ظهور  كل ما يكتب من نصوص و روابط  أ و صور .

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

 

investolife

 

 

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

 الهامش (Margin ) :

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

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

 

investolife

التنفيذ

investolife

 

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

 

investolife

 

 

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

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

 

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

top     right    bottom         left

 

 

 الإطار (Border ) :

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

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

investolife

 

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

investolife

 

 

انواع الأطر

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

investolife

 

حمل  المثال

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

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

 

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

.

border:2px Red solid ; 

 

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

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

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

investolife

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

 

.ex1 {padding:2cm};v

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

 

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

 

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

 

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

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

 

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

 

 


 

الموضوع  :  نموذج الصندوق box model في CSS المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468