أكيد كلنا بنشوف الـBox Sizing في أي صفحة CSS بنفتحها، ولكن انت تعرف الـProperty دي بتعملي ايه بالظبط؟ خليني أشرحلك
احنا هنتعامل مع أي عنصر على اساس انه Box، سواء كان Element أو Pseudo Element، أي Box في الدنيا ليه طول وعرض، الطول على المحور Y (الرأسي) والعرض على المحور X (الأفقي)
ولكن في الـCSS، فـ هي بشكل افتراضي بتحسب الطول والعرض على أساس طول وعرض المحتوى داخل الـElement، يعني لو عندك Paragraph Element حاطط جواه شوية Text، ببساطة العرض والطول بتاعه بشكل افتراضي هيبقى عبارة عن عرض وطول النص ده، ودي الـDefault Value للـBox-Sizing وهي الـContent-Box
ولكن هنا لو الـP Element ده ليه Padding وMargin أو Border، ببساطة الـCSS مش هتحسبهم من ضمن الطول والعرض، ولكن بشكل فعلي هم واخدين من الطول والعرض للـViewport، وهنا تكمن المشكلة يا عزيزي
ولحسن الحظ، الـCSS بتوفرلنا التحكم في طريقة حسابها للطول والعرض فيما يعرف بالـBox-Sizing، ودي بتقبل مننا كذا Value (هسيبلك في أول كومنت لينك بيشرح الـProperty بشكل كامل، ولكن اللي هنتكلم عنها النهاردة هي الـBorder-Box
ودي ببساطة طريقة لحساب العرض والطول بتاع الـElement، مع الأخذ في الاعتبار الـPadding والـBorder Size، والـMargin بتطلعه من الحسبة لأنه منطقيًا مش من ضمن الـBox Size بتاع الـElement! وحقيقي دي أكتر Value هستستخدمها في حياتك مع الـCSS
وبس كدة، ده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص