سیاساس/box-model
| خط دور | box-model | ویژگی display |
| سیاساس |
box-model یا مدل جعبهای
[ویرایش]مدل جعبهای (Box Model) مفهومی پایهای در CSS است که توضیح میدهد هر عنصر HTML چگونه اندازهگیری و نمایش داده میشود. این مدل تعیین میکند که عرض و ارتفاع واقعی یک عنصر شامل چه بخشهاییست: محتوا، padding، border و margin.
اجزای مدل جعبهای
[ویرایش]هر عنصر HTML در مرورگر به شکل یک جعبه تفسیر میشود که شامل بخشهای زیر است:
Content: محتوای واقعی عنصر (مثل متن یا تصویر)Padding: فضای داخلی اطراف محتواBorder: حاشیه دور عنصرMargin: فاصلهٔ عنصر با عناصر اطراف
نمودار مفهومی
[ویرایش]+---------------------------+ | margin | | +---------------------+ | | | border | | | | +---------------+ | | | | | padding | | | | | | +---------+ | | | | | | | content | | | | | | | +---------+ | | | | | +---------------+ | | | +---------------------+ | +---------------------------+
محاسبهٔ ابعاد کل
[ویرایش]ابعاد نهایی یک عنصر برابر است با:
عرض کل = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
ارتفاع کل = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
مثال
[ویرایش]<div style="width: 200px; padding: 10px; border: 5px solid black; margin: 20px;">
جعبه نمونه
</div>
↑ در این مثال، عرض واقعی عنصر روی صفحه برابر است با:
200 + 10 + 10 + 5 + 5 = 230px (بدون احتساب margin)
box-sizing
[ویرایش]ویژگی box-sizing تعیین میکند که width و height شامل کدام بخشها باشند.
| مقدار | توضیح |
|---|---|
content-box |
پیشفرض: width و height فقط محتوای اصلی را شامل میشود. (padding و border جداست) |
border-box |
width و height شامل padding و border هم هستند. |
مثال: border-box
[ویرایش]* {
box-sizing: border-box;
}
↑ با این کار، محاسبهٔ اندازهٔ عناصر سادهتر و پیشبینیپذیرتر میشود؛ مخصوصاً در طراحی ریسپانسیو.
چرا box-sizing: border-box؟
[ویرایش]- راحتتر کنترل اندازه عناصر - جلوگیری از ایجاد scroll ناخواسته - سازگار با grid و flex - توصیه شده در فریمورکهایی مثل Bootstrap، Tailwind و...
کاربرد در طراحی ریسپانسیو
[ویرایش]در طراحی واکنشگرا، استفاده از border-box کمک میکند تا عناصر در سایزهای مختلف صفحه درست نمایش داده شوند و مشکلات layout کمتر شوند.
تعامل با سئو
[ویرایش]هرچند مدل جعبهای مستقیماً در رتبهبندی سئو تاثیری ندارد، اما باعث ایجاد چیدمان تمیز و خوانا میشود که در تجربه کاربری تأثیر دارد — چیزی که Google اهمیت زیادی به آن میدهد.
تمرین: ساخت جعبه با box model
[ویرایش]<div style="box-sizing: border-box; width: 300px; padding: 20px; border: 2px solid #555;">
این باکس دقیقاً ۳۰۰px پهنا دارد (شامل محتوا، پدینگ و کادر)
</div>
جمعبندی
[ویرایش]مدل جعبهای اساس طراحی در CSS است. درک دقیق آن به شما کمک میکند تا:
- چیدمان عناصر را کنترل کنید
- از رفتارهای غیرمنتظره جلوگیری کنید
- طراحی ریسپانسیوتری پیادهسازی کنید
- تجربه کاربری بهتری ارائه دهید
مطالعهٔ بیشتر: