خصوصیت box-sizing به ما امکان می دهد در ارتفاع و عرض کل عناصر حاشیه و مرز  در نظر بگیریم
  • 1395/3/18 6/7/2016 4:43:58 PM 6/7/2016 4:43:58 PM
  • 0
  • 417

خصوصیت box-sizing به ما امکان می دهد در ارتفاع و عرض کل عناصر حاشیه و مرز  در نظر بگیریم.


پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

 

خصوصیت

IE

Chrome

Firefox

Safari

Opera

box-sizing

8.0

10.0

4.0 –

Webkit-

29.0

2.0 –

Moz-

5.1

3.1 –

Webkit-

9.5

 


بدون خصوصیت box-sizing CSS3

به صورت پیش فرض ، ارتفاع و عرض یک عنصر به صورت زیر محاسبه می شود:

 

عرض + حاشیه + مرز = عرض واقعی یک عنصر

ارتفاع + حاشیه + مرز = ارتفاع واقعی یک عنصر

 

این به این معنی است: وقتی که شما ارتفاع/عرض یک عنصر را مقدار دهی می کنید، عنصر اغلب بزرگتر از آنچه که شما مقدار دادید نمایش داده می شود ( زیرا مرز و حاشیه به  ارتفاع/عرض تعیین شده ی عنصر اضافه شده اند)

 

توضیح زیر دو عنصر <div> با همان  ارتفاع  و عرض یکسان نمایش داده می شود:

دو عنصر <div>  بالا و پایین در نتیجه اندازه های دارند ( زیر div2 یک حاشیه تعیین شده دارد)


مثال

.div1 {
    width300px;
    height100px;
    border1px solid blue
}

.div2 {
    width300px;
    height100px;
    padding50px;
    border1px solid red;
}

بنابراین ، برای مدت طولانی طراحان وب مقدار عرض کوچکتری نسبت به آنچه می خواستند تعیین می کردند، زیرا آن ها باید مرزها و حاشیه ها را از آن کم می کردند.

در CSS3 خصوصیت box-sizing این مشکل را حل می کند.


با خصوصیت box-sizing CSS3

خصوصیت box-sizing به ما اجازه می دهد، حاشیه و مرزها را در ارتفاع و عرض کل داشته باشیم.

اگر شما مشخصه box-sizing: border-box;   رو برای یک عنصر تعیین کنید، مرز و حاشیه در ارتفاع و عرض ادغام می شوند

 

این همان مثال بالاست، با مشخصه box-sizing: border-box;  اضافه شده به عناصر <div>

 

مثال

.div1 {
    width300px;
    height100px;
    border1px solid blue;
    box-sizingborder-box;
}

.div2 {
    width300px;
    height100px;
    padding50px;
    border: 1px solid red;
    box-sizing: border-box;
}

از آنجاییکه که نتیجه ی استفاده از مشخصه box-sizing: border-box;  خوب است، تعدادی از طراحان ترجیح می دهند تمام عناصر روی صفحه شان به این شیوه عمل کنند.

 

کد زیر تضمین می کند که همه عناصر به این شیوه ی قابل فهم اندازه می گیرند.

تعدادی از مرورگر ها پیش از این از box-sizing: border-box; برای تعدادی از عناصر استفاده می کردند ( اما نه همه – به همین دلیل است که input  ها و textarea  ها در اندازه 100% متفاوت به نظر می رسند)

 

اعمال این به همه عناصر عاقلانه و امن است:


مثال

* {
    box-sizingborder-box;
}

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
اندازه قاب CSS3
زیگماوب