اين مفهوم يکي از اولين
چيزهايي است که براي رسيدن به طرح‌بندي‌هايي با امنيت و کارايي بالا و قابل
نمايش در مرورگرهاي مختلف، بايد کاملا با آن آشنا باشيد. خوشبختانه فهم
مدل باکس سخت نيست و معمولا در تمام مرورگرها (به‌جز شرايط خاصي که در برخي
از نسخه‌هاي خاص اينترنت اکسپلورر به‌‌وجود مي‌آيد) به يک شکل کار مي‌کند.
مدل باکس CSS وظيفه محاسبه موارد زير را دارد:
- هر عنصر بلاک‌شده، به
تنهايي چقدر فضا اشغال مي‌کند؟
- مرزها (border) و
حاشيه‌ها (margin) با هم تطابق دارند يا همديگر را مختل مي‌کنند؟
- ابعاد يک باکس چيست؟
- در برخي موارد، محل
قرار گرفتن باکس با درنظر گرفتن جايگاه بقيه عناصر صفحه كجاست؟
قواعد پايه‌اي مدل باکس
CSS عبارتند از:
- اندازه يک عنصر، اصولا
به‌طور مستطيل محاسبه مي‌شود.
- ابعاد يک عنصر
بلاک‌شده، به‌وسيله عرض، ارتفاع، متن‌هاي اضافي، مرزها و حاشيه‌ها.
- اگر ارتفاعي تعيين
نشده بود، ارتفاع عنصر بلاک‌شده، ارتفاع محتواي آن به‌علاوه متن‌هاي اطراف
آن خواهد بود.
- اگر عرض تعيين نشده
بود، يک باکس ثابت، براي اندازه‌گيري عرض والدش منهاي متن‌هاي اضافي، بسط
داده خواهد شد.
برخي چيزهاي مهمي که در
برخورد با عناصر بايد در نظر داشته باشيد:
- اگر عرض يک باکس روي
100درصد تنظيم شده بود، نبايد حاشيه، متن اضافي يا مرز داشته باشد. در غير
اين صورت در والدش سرريز مي‌کند (overflow).
- حاشيه‌هايي که از نظر
عمودي نزديک هم هستند، مي‌توانند سبب برخي به‌هم‌ريختگي‌هاي پيچيده شوند که
مشکلاتي را در طرح‌بندي ايجاد کنند.
- قوانين و اصول بالا،
در حالتي صادق هستند که صفحه‌اي که عناصر را در بر گرفته، در حالت
استاندارد رندر شده باشد.
