آشنایی با box-sizing در css

به طور معمول، تعیین اندازه‌ی padding و border برای یک عنصر در css باعث می‌شود تا طول و عرض واقعی آن عنصر افزایش پیدا کند
برای مثال اگر عرض یک عنصر ۱۰۰ پیکسل مشخص شود و از هر طرف ۵ پیکسل padding به آن نسبت داده شود، عرض واقعی آن عنصر مساوی ۱۰۰ + ۵ + ۵ یا ۱۱۰ پیکسل خواهد شد

در طراحی سایت واکنش‌گرا یا Responsive گاهی نیاز می‌شود تا عرض مشخص شده برای یک عنصر بدون توجه به مقدار padding و border آن مشخص شود.
مثلا هنگامی که عرض یک عنصر به صورت درصدی تعیین شود و مقدار padding و border به صورت پیکسلی
در چنین شرایطی، لازم می‌شود تا شکل محاسبه‌ی عرض واقعی یک عنصر تغییر پیدا کند

دستور box-sizning در css که در ابتدا برای رفع یک خطای موجود در نگارش‌های قدیمی IE ایجاد شده بود، هم‌اکنون به عنوان یک روش متداول برای طراحی واکنش‌گرا استفاده می‌شود

با تعیین مقدار box-sizning با عبارت «border-box» این مشکل برطرف می‌شود:

کد:

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    width: 100px;
    padding: 5px;
}

دقت کنید که در حال حاضر لازم است تا این ویژگی با پیشوندهای مخصوص مرورگرها در css درج شود
هم‌اکنون عنصر div دارای عرض ۱۰۰ پیکسل خواهد بود که ۱۰ پیکسل از آن به padding اختصاص پیدا کرده و محل باقیمانده برای محتوای داخلی مساوی ۹۰ پیکسل خواهد بود

خواندن 3053 دفعه

نظر شما چیست ؟