شرح أساسيات CSS Box Model

 ما هو CSS Box Model ؟

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

ولكي تتعمل مع العناصر بشكل صحيح سجي أن تكون قادر على تحديد أبعاد الصندوق بشكل صحيح لكي تنظم الصفحة

 

أهم الأساسيات المستخدمة في الأبعاد

 [[width]] العرض

[[height]]  الإرتفاع

[[margin]] المسافات الخارجية للعنصر درجة بعده من العناصر الأخرى

[[padding]] المسافات الداخلية للعنصر درجة بعد ما بداخل العنصر من الحواف الخاصة بالعنصر 

 

كتابة العناصر

.example {
width:200px;
height:160px;
margin:15px;
padding:10px
}

 نستخدم وحدات القياس مع تلك العناصر ويمكن أن نستخدم أى نوع من الوحدات نريد

 

الحدود القصوى والدنيا

 يتاح لنا في خيارات العرض والإرتفاع عمل حد أقصى وحد أدنى للعنصر

وها يفيد في مسألة تجاوب العنصر

.example {
width:100%;
max-width:500px;
min:width:200px;
height:auto;
max-height:300px;
min-height:60px
}

 في هذا الكود قلنا التالي

 اجعل حجم العنصر 100% من مساحة الصفحة

لكن لو الصفحة كبيرة لا تجعله يزيد عن 500px 

اما لو الصفحة صغيرة لا تجعله يقل عن 200px

 ثم قلنا له اجعل الإرتفاع تلقائي auto

لكن لو ارتفاع الصفحة كبيرة اجعل ارتفاع الأقصى  300px

ولو الصفحة صغيره لا تجعله يقل عن 60px

 

سؤال ما معنى لا تجعله يقل ؟

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

أو يجعل الصفحة تقبل التمرير ليتم رؤية العنصر 

 

كتابة margin , padding

 هذه العناصر لها طرق كتابة مختلفة , كل عنصر فيهم له أربعة خواص تعبر عن الإتجهاهات

[[top]] الأعلى

[[right]] يمين 

[[bottom]] أسفل

[[left]] يسار

 

.example {
margin-top:10px;
margin-right:40px;
margin-bottom:30px;
margin-left:8px;
padding-top:5px;
padding-right:16px;
padding-bottom:9px;
padding-left:7px
}

القيمة المختصرة

 هي طريقة كتابة نفس الشئ لكن بشكل مختصر

.example {
margin:10px 40px 30px 8px;
padding:5px 16px 9px 7px;
}

 أكيد لاحظت فرق الترتيب لم أقل اعلى ثم أسفل بل قلت أعلى ثم يمين

هذه هي نفس الفكرة في الترتيب للقيمة المختصية

أعلى يمين أسفل يسار

كل رقم يعبر عن اتجاه

 

متى نستخدم كل صيغة بشكل صحيح ؟

 لو انت لا تحتاج سوى اتجاه واحد فقط الذي ستحدد له قيمه اذن لا تستخدم المتختصرة استخدم القيمة الصريحة للإتجاه مثلاً

[[margin-top:50px;]] 

طيب لو فرضنا مثلاً أن القيمة كلها واحده يعني كل المسافات وليكن 10px

حينها لا تحتاج تكرار القيمة فقط [[padding:10px;]] 

 طيب لنفترض أن القيمة مشابهة فقط في اليمين واليسار

فستكتب فقط القيم المختلفة في الاعلى والأسفل [[margin:15px 10px 30px;]] 

لو القيمة مختلفة في اليمين واليسار حينها ستكتب القيمة المختصرة كاملة .