تبلیغات متنی و بنر

آموزش CSS 3 > رابط کاربری در CSS 3 > خاصیت box-sizing

خاصیت box-sizing :

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

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

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

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

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

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

مثال عملی :

در مثال های زیر به تشریح نحوه استفاده از این خاصیت پرداخته ایم .  در این مثال دو تگ <div > داریم که در یک تگ < div > دیگر قرار گرفته اند . به حالت نمایش آن دو در دو حالت توجه نمایید :

 border-box مثال  1 - حالت  
<!DOCTYPE html>
<html>
   <head>
        <style>
                div.container
                       {
                              width:30em;
                              border:1em solid;
                        }
               div.box
                       {
                            box-sizing:border-box;
                           -moz-box-sizing:content-box; /* Firefox */
                           width:50%;
                           border:5px solid red;
                          float:left;
                         }
        </style>
    </head>
<body>
    <div class="container">
        <div class="box">This div occupies the left half.</div>
        <div class="box">This div occupies the right half.</div>
    </div>
</body>
</html> 		کد
This div occupies the left half.
This div occupies the right half.
 خروجی

 content-box مثال  2 - حالت  
<!DOCTYPE html>
<html>
   <head>
        <style>
                div.container
                       {
                              width:30em;
                              border:1em solid;
                        }
               div.box
                       {
                            box-sizing:content-box;
                           -moz-box-sizing:content-box; /* Firefox */
                           width:50%;
                           border:5px solid red;
                          float:left;
                         }
        </style>
    </head>
<body>
    <div class="container">
        <div class="box">This div occupies the left half.</div>
        <div class="box">This div occupies the right half.</div>
    </div>
</body>
</html> 		کد
This div occupies the left half.
This div occupies the right half.
 خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟