در مطالب قبلی در مورد رابط کاربری در زبان CSS3 مقدمه ای را برای شما ارائه کردیم.در این آموزش قصد داریم تا تا دقیق تر به این موضوع بپردازیم و خواص موجود در این مبحث را برای شما تشریح و بررسی کنیم.خاصیتی که در زیر به بررسی آن می پردازیم خاصیت box-sizing است.
خاصیت box-sizing :
خاصیت box-sizing به شما امکان می دهد تا عناصر مورد نظر خود را به یک شیوه خاص نمایش دهید .
یعنی چه ؟
برای مثال فرض کنید که دو تگ < div > دارید که در کنار هم هستند . به وسیله این خاصیت می توان تعیین نمایید تا این دو تگ نسبت به هم چگونه نمایش داده شوند . در مثال عملی نحوه کار این خاصیت نمایش داده شده است :
شکل کلی استفاده از این خاصیت به صورت زیر است :
;Syntax: box-sizing : content-box | border-box
;box-sizing : content-box:مثال
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به صورت عادی از این خاصیت پشتیانی می کنند . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
کد لازم برای پشتیانی نوع مرورگر:
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-box-sizing- بنویسید .
در بقیه مرور گرها به صورت عادی پشتیباتی می شود.