در مطالب قبلی در مورد رابط کاربری در زبان CSS3 مقدمه ای را برای شما ارائه کردیم.در این آموزش قصد داریم تا تا دقیق تر به این موضوع بپردازیم و خواص موجود در این مبحث را برای شما تشریح و بررسی کنیم.خاصیتی که در زیر به بررسی آن می پردازیم  خاصیت box-sizing است.

خاصیت box-sizing :

خاصیت box-sizing به شما امکان می دهد تا عناصر مورد نظر خود را به یک شیوه خاص نمایش دهید .
یعنی چه ؟
برای مثال فرض کنید که دو تگ < div > دارید که در کنار هم هستند . به وسیله این خاصیت می توان تعیین نمایید تا این دو تگ نسبت به هم چگونه نمایش داده شوند . در مثال عملی نحوه کار این خاصیت نمایش داده شده است :

شکل کلی استفاده از این خاصیت به صورت زیر است :

 ;Syntax: box-sizing : content-box | border-box 

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

پشتیانی در مرورگر های مختلف :

اکثر مرورگر های مطرح به صورت عادی از این خاصیت پشتیانی می کنند . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :

کد لازم برای پشتیانی نوع مرورگر:

مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-box-sizing- بنویسید .

در بقیه مرور گرها به صورت عادی پشتیباتی می شود.