معرفی و کاربرد box-sizing در CSS

ویژگی box-sizing در CSS

قوانین شیوه‌نامه‌های CSS به صورت پیش‌فرض عرض عناصر را با جمع‌کردن width و padding و border محاسبه می‌کنند. به عبارت دیگر اگر برای یک عنصر قانون CSS به شکل زیر را تعریف کنیم، عرض آن با جمع مقادیر ۱۰۰ و ۱۰ و ۴ مساوی ۱۱۴ پیکسل خواهد بود. در ادامه روشی برای تغییر این عملکرد پیش‌فرض معرفی خواهیم کرد.

دقت کنید که padding و border در سمت چپ و راست قرار می‌گیرند و در نتیجه ۵ پیکسل و ۲ پیکسل در ۲ ضرب خواهند شد.

ویژگی box-sizing

ویژگی box-sizing در CSS ابزاری است که روش محاسبه‌ی ارتفاع و عرض را از حالت پیش‌فرض تغییر می‌دهد. با مقداردهی به این ویژگی به شکل زیر می‌توانیم padding و border را بخشی از width به حساب آوریم نه به عنوان اضافه. به عبارت دیگر با دستورات زیر، عرض کل عنصر ۱۰۰ پیکسل خواهد بود. در نتیجه ۱۴ پیکسل از ۱۰۰ پیکسل کسر می‌شود و باقیمانده ۸۶ پیکسل خواهد بود.

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱