طريقة استخدام خاصية box-sizing في CSS3 ومثال

يستخدم خاصية box-sizing CSS لتغيير القيم الافتراضيةنموذج صندوق CSS،المتصفح عادة يستخدم هذا النموذج لتحديد عرض وارتفاع العناصر.

جدول التالي يوضح وصف الاستخدام والتاريخ الإصداري لهذه الخاصية، وكذلك استخدام هذه الخاصية في جملة JavaScript.

جملة استخدام box-sizing

جملة النص الخاصة بهذه الخاصية هي:

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

المثال التالي يوضح كيفية استخدام خاصية box-sizing.

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

قيمة الخاصية

جدول التالي يصف القيم لهذه الخاصية.

توافق المتصفح

مستوى التوافق للمتصفحات للخصائص box-sizing، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح الذي يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

قراءة المزيد

يرجى الرجوع إلى الدروس المتعلقة بالمحتوى التالي:نموذج الصندوق CSS،حجم CSS。

الخصائص ذات الصلة:padding،border،margin。