معرفی و کاربرد box-sizing در CSS
قوانین شیوهنامههای CSS به صورت پیشفرض عرض عناصر را با جمعکردن width و padding و border محاسبه میکنند. به عبارت دیگر اگر برای یک عنصر قانون CSS به شکل زیر را تعریف کنیم، عرض آن با جمع مقادیر ۱۰۰ و ۱۰ و ۴ مساوی ۱۱۴ پیکسل خواهد بود. در ادامه روشی برای تغییر این عملکرد پیشفرض معرفی خواهیم کرد.
1 2 3 4 5 6 7 8 9 |
<style> div { width: 100px; padding: 5px; border: 2px solid #000; } </style> <div>روکا</div> |
دقت کنید که padding و border در سمت چپ و راست قرار میگیرند و در نتیجه ۵ پیکسل و ۲ پیکسل در ۲ ضرب خواهند شد.
ویژگی box-sizing
ویژگی box-sizing در CSS ابزاری است که روش محاسبهی ارتفاع و عرض را از حالت پیشفرض تغییر میدهد. با مقداردهی به این ویژگی به شکل زیر میتوانیم padding و border را بخشی از width به حساب آوریم نه به عنوان اضافه. به عبارت دیگر با دستورات زیر، عرض کل عنصر ۱۰۰ پیکسل خواهد بود. در نتیجه ۱۴ پیکسل از ۱۰۰ پیکسل کسر میشود و باقیمانده ۸۶ پیکسل خواهد بود.
1 2 3 4 5 6 7 8 9 10 11 |
<style> div { box-sizing: border-box; width: 100px; padding: 5px; border: 2px solid #000; } </style> <div>روکا</div> |