15. أهمية Box-Sizing: border-box

بشكل افتراضي، يعمل نموذج صندوق CSS فيما يسمى بوضع content-box. هذا السلوك الافتراضي غالباً ما يؤدي إلى حسابات تخطيط محبطة.

السلوك الافتراضي: content-box

في وضع content-box (الافتراضي)، عندما تحدد العرض width والارتفاع height ، فأنت تحدد حجم منطقة المحتوى فقط.

إذا قمت بتعيين:

css .my-box { width: 200px; padding: 10px; /* +20px إجمالي أفقي / border: 5px solid black; / +10px إجمالي أفقي */ }

سيكون عرض الصندوق الفعلي المرئي على الشاشة هو 200px (المحتوى) + 20px (الحشوة) + 10px (الحدود) = 230px.

السلوك الأفضل: border-box

عندما تضبط box-sizing: border-box ، فإن خصائص العرض width والارتفاع height تحدد حجم الصندوق بالكامل، بما في ذلك المحتوى والحشوة والحدود.

إذا قمت بضبط نفس الخصائص مع border-box:

css .my-box-better { box-sizing: border-box; width: 200px; padding: 10px; border: 5px solid black; }

عرض الصندوق الفعلي المرئي هو 200px بالضبط. يتم احتواء الحشوة والحدود داخل ذلك العرض المحدد، مما يجعل التخطيط أكثر قابلية للتنبؤ.

إعادة التعيين العالمي الموصى به

من الممارسات الاحترافية القياسية تطبيق border-box على كل عنصر في ملف التنسيق لتجنب الحسابات المعقدة، وغالباً ما يتم ذلك باستخدام المحدد العام أو نسخة موسعة قليلاً:

css html { box-sizing: border-box; } *, *::before, ::after { box-sizing: inherit; / يرث من HTML، مما يجعل التغيير سهلاً */ }