در CSS، box model یکی از مفاهیم پایه‌ای است که نحوه محاسبه عرض و ارتفاع عناصر را تعیین می‌کند. به طور پیش‌فرض، box model استاندارد شامل محتوا، padding، border و margin است. اما آیا می‌توان این رفتار پیش‌فرض را تغییر داد؟ پاسخ مثبت است! با استفاده از ویژگی box-sizing می‌توان نحوه محاسبه ابعاد عناصر را کنترل کرد.
کاربردهای عملی تغییر box model
تغییر box model در طراحی‌های واکنش‌گرا و طرح‌بندی‌های پیچیده بسیار مفید است. به ویژه زمانی که می‌خواهید padding یا border روی عرض کلی عنصر تأثیر نگذارد. این ویژگی به شما کمک می‌کند محاسبات دستی کمتری انجام دهید و کنترل بهتری روی ابعاد عناصر داشته باشید.
- طراحی‌های پیچیده با عناصر متعدد
- ایجاد طرح‌بندی‌های دقیق بدون محاسبات اضافی
- ساده‌سازی کدهای CSS در پروژه‌های بزرگ
- حفظ نسبت‌های دقیق در طراحی‌های ریسپانسیو
نمونه کدهای مرتبط
در این بخش سه مثال عملی از تغییر box model را بررسی می‌کنیم:
مثال ۱: استفاده از box-sizing: content-box (پیش‌فرض)
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}در این حالت، عرض کل عنصر برابر با 300px (محتوا) + 40px (padding) + 10px (border) = 350px خواهد بود.
مثال ۲: استفاده از box-sizing: border-box
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}در این حالت، عرض کل عنصر دقیقاً 300px باقی می‌ماند و padding و border از فضای محتوا کسر می‌شوند.
مثال ۳: اعمال global border-box
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}این روشی رایج برای اعمال border-box روی تمام عناصر صفحه است و بسیاری از توسعه‌دهندگان آن را به عنوان یک reset CSS استفاده می‌کنند.
خلاصه درس
- مقدار پیش‌فرض box-sizing در مرورگرها content-box است
- استفاده از border-box محاسبات ابعاد را بسیار ساده‌تر می‌کند
- تغییر box model روی عملکرد مرورگر تأثیر منفی نمی‌گذارد
- برای طرح‌بندی‌های پیچیده، border-box گزینه بهتری است
- همیشه سازگاری با مرورگرهای مختلف را بررسی کنید
در نهایت، انتخاب بین content-box و border-box به نیازهای پروژه و ترجیحات توسعه‌دهنده بستگی دارد. اما امروزه بسیاری از توسعه‌دهندگان حرفه‌ای استفاده از border-box را به دلیل سادگی در محاسبات توصیه می‌کنند.
