حجم الصندوق CSS3 (box-sizing)

باستخدام وظائف ضبط حجم الصندوق في CSS3، يمكنك تحديد عرض العنصر الفعلي.

استخدام حجم الصندوق (box-sizing) لإعادة تعريف عرض الصندوق

بالتأكيد، عرض أو طول صندوق العنصر المظاهر على شبكة الإنترنت يعتمد عليهwidthأوheight،paddingوborderقيمة الخاصية. على سبيل المثال، إذا كنت قد<div>الذرات التطبيقية قد استخدمت بعض الهوامش الداخلية والحواف، فإن شريط التمرير الأفقي سيظهر، كما هو موضح في المثال أدناه.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px　solid　#f08080;
}

هذه مشكلة شائعة جدًا تواجهها مصممو الويب لفترة طويلة. ولكن، أدخل CSS3 خاصية box-sizing لحل هذه المشكلة وجعل تخطيط CSS أكثر بساطة ووضوحًا. تُغير خاصية box-sizing نموذج الصندوق الافتراضي للCSS بشكل يتيح لكل padding أو border المحدد على العناصر أن يتم تخطيطه وتنفيذه داخل منطقة المحتوى، مما يجعل عرض وتحديد الارتفاع للعناصر يساوي الأبعاد المحددة للعرض والارتفاع في خصائص CSS width وheight.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px　solid　#f08080;
　　　　box-sizing:　border-box;
}

إذا رأيت مخرجات هذا المثال، فإنك ستجد أن الشريط المرئي قد اختفى.

إنشاء التخطيط باستخدام Box-Sizing

من خلال خاصية box-sizing في CSS، أصبح إنشاء تخطيطات متعددة الأعمدة باستخدام النسب بسيطًا جدًا. الآن، لا تحتاج إلى القلق حول حجم الصندوق النهائي للعناصر، دون الحاجة إلى إضافة حواف أو حواف.

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

.box　{
　　　　width:　50%;
　　　　padding:　20px;
　　　　background:　#f2f2f2;
　　　　float:　left;
　　　　box-sizing:　border-box;
}

بالطبع، يمكنك استخدام هذه التكنولوجيا البسيطة لإنشاء تخطيطات معقدة.

.box　{
　　　　width:　30%;
　　　　padding:　20px;
　　　　margin-left:　5%;
　　　　background:　#f2f2f2;
　　　　float:　left;
　　　　box-sizing:　border-box;
}
.box:first-child　{
　　　　margin-left:　0;
}