فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

الصناديق BOX MODEL في لغة CSS

في لغة CSS يوجد مصطلح بأسم Box Model ,هذا المصطلح ينطبق علي العناصر التي تأخذ مساحة من مساحة الصفحة ,بمعني أخر هي تنطبق علي اغلب عناصر HTML ,ولكن ما نريد ان نتحدث عنة الأن هو تعريف وشرح نظرية الصندوق Box Model .

لو قمنا بأنشاء عنصر يحتوي علي عرض, 100px  وارتفاع 100px  فأن المساحة الكلية للعنصر ستكون 100*100 , ولكن ماذا لو قمنا بأضافة حدود (اطار) للعنصر بحجم 20px وهوامش داخلية بحجم 20px  .

النتيجة = 100 + 20 + 20 = 140px                   

 
 

حجم العنصر Box Model

يتم حساب حجم العنصر عن طريق جمع كل الخواص المضافة الي مساحة العنصر مثل الهوامش الداخلية Paddig  والهوامش الخارجية Margin والحدود border والحجم الأساسي للعنصر height And Width .

الحجم الحقيقي للعنصر يتم معرفتة بعد جمع الخصائص التالية

  • padding : الهوامش الداخلية
  • Margin : الهوامش الخارجية
  • Height And Width : الحجم الأساسي للعنصر
  • Border : حدود العنصر

الحجم الحقيقي = padding + Margin + Width + Border

الحجم الأساسي = height And Width


أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات