Code JS

# Border - box

# # الـ Box Model وفكرة الـ border-box في CSS

الـ **border-box** هي قيمة لخاصية:

```css
box-sizing: border-box;
```

لما تستخدم **border-box**، أي **width** أو **height** بتحدده بيكون هو الحجم النهائي للعنصر.

وده معناه إن **الـ padding والـ border بيتاخدوا من نفس مساحة العنصر**، مش بيتضافوا عليها. يعني كل ما تزود الـ **padding** أو الـ **border**، مساحة **المحتوى (Content)** هي اللي بتقل، لكن حجم العنصر نفسه بيفضل ثابت.

# # # ليه نستخدمه؟

* بيسهّل التحكم في المقاسات.
* بيحافظ على ثبات حجم العناصر.
* بيخلي تصميمات الـ Responsive أسهل وأدق.

💡 **افتكر:**
في **border-box**، الـ **padding** والـ **border** جزء من مساحة العنصر نفسها، مش زيادة عليها، لذلك الـ **width** والـ **height** بيفضلوا ثابتين.

الـ Box Model وفكرة الـ content-box في CSS

من الحاجات المهمة في CSS إنك تفهم يعني إيه Box Model، وإيه فكرة content-box، لأنها اللي بتحدد إزاي المتصفح بيحسب حجم أي عنصر.

يعني إيه Box Model؟

كل عنصر في CSS بيتعامل معاه المتصفح على إنه صندوق، مكوّن من:

Content: المحتوى نفسه
Padding: المسافة بين المحتوى والحدود
Border: الحدود
Margin: المسافة الخارجية بين العنصر واللي جنبه
يعني إيه content-box؟

هي القيمة الافتراضية لخاصية box-sizing.

مثال:
box-sizing: content-box;

في الوضع ده، لما تحدد width أو height، القيمة بتتطبق على المحتوى بس، والـ padding والـ border بيتضافوا فوق العرض، مش جواه.

مثال عملي

لو عندك:
width: 200px;
padding: 20px;
border: 5px solid black;

العرض الفعلي هيبقى:
200 + 20 + 20 + 5 + 5 = 250px

يعني العرض اللي كتبته مش هو النهائي، وده بيسبب مشاكل كتير لو مكنتش منتبه.

ليه بنستخدم border-box بدل content-box أحيانًا؟

لأن كتير من المطورين بيفضلوا:
box-sizing: border-box;

هنا الـ padding والـ border بيتحسبوا جوه العرض المحدد مش زيادة عليه، وده بيسهّل التحكم في المقاسات.

معلومة مهمة

لو مكتبتش box-sizing خالص، المتصفح بيستخدم content-box تلقائيًا.

💡 افتكر:
في content-box، الـ width بيحسب للمحتوى بس، والـ padding والـ border بيتضافوا فوقه. خد بالك من الفرق ده وإنت بتصمم.

الـ Font Family وفكرة الـ Fallback في CSS

من الحاجات المهمة جدًا في CSS إنك تفهم يعني إيه Font Family، وإيه فكرة إنك تكتب أكتر من خط في font-family، وده اللي بنسميه Fallback.

يعني إيه Font Family؟

خاصية font-family هي اللي بتحدد الخط اللي النص هيتعرض بيه على الصفحة.

مثال:

font-family: Arial, sans-serif;
يعني إيه Fallback؟

تقدر تكتب أكتر من خط داخل font-family، ولو المتصفح ملقاش أول خط، هيجرب اللي بعده، ولو ملقاهوش كمان يكمل لحد ما يلاقي خط متوفر على جهاز المستخدم.

وده اسمه Fallback.

مثال:

font-family: "Poppins", Arial, sans-serif;

في المثال ده:

المتصفح هيحاول يستخدم Poppins الأول.
لو الخط مش موجود أو محملش، هيستخدم Arial.
ولو Arial مش موجود، هيستخدم أي خط من عائلة sans-serif.
ليه بنستخدم أكتر من خط؟

لأن مش كل الأجهزة بيكون عليها نفس الخطوط، وكمان لو الخط مستورد من الإنترنت ممكن يحصل مشكلة أثناء تحميله.

علشان كده بنكتب خطوط بديلة، بحيث الموقع يفضل شكله كويس والنص يفضل مقروء.

يعني إيه Generic Font Family؟

آخر حاجة في القائمة بيكون اسم عائلة خطوط عامة زي:

serif
sans-serif
monospace
cursive
fantasy

ودي مش أسماء خطوط معينة، لكنها فئات، والمتصفح بيختار منها خط مناسب لو ملقاش أي خط من اللي قبله.

معلومة مهمة

المتصفح بيقرأ font-family من الشمال لليمين، وأول خط يلاقيه متوفر هو اللي هيستخدمه، وبعد كده بيتجاهل باقي الخطوط.

💡 افتكر القاعدة دي دايمًا:

اكتب الخط الأساسي الأول، وبعده خطوط بديلة، وفي الآخر حط Generic Font Family علشان تضمن إن النص هيظهر بشكل كويس على كل الأجهزة.