این مدل برای برطرف کردن مشکل render کردن در مرورگر های قبل از IE نسخه 6 استفاده میشد. به طوری که لبه و فاصله ها در ویژگی عرض یک عنصر ضمیمه شده بودند. مثلا زمانی که ابعاد یک کانتینر را تعیین میکنید ممکن است از چنین کدی استفاده نمایید:

#box

{

width: 100px;

border: 5px;

padding: 20px;

}

این قانون CSS به چنین کدی اعمال خواهد شد:

<div id="box">...</div>این بدان معنی است که مجموع عرض این جعبه 150 پیکسل (100 پیکسل عرض + 2 لبه 5 پیکسلی + 2 فاصله 20 پیکسلی) خواهد بود. البته در همه مرورگرها به جز آنهایی که قبل از IE 6 ایجاد شده بودند. در این مرورگرها کل عرض بهمراه فاصله و لبه همان 100 پیکسل خواهد بود.

مدل جعبه میتواند این مشکل را حل کند اما به شکلِ بسیار بد!

یک راه دیگر بریا انجام چنین کاری، استفاده از عبارتی نظیر این خواهد بود:

#box

{

width: 150px;

}

#box div {

border: 5px;

padding: 20px;

}

و کد HTML میتواند چنین باشد:

<div id="box"><div>...</div></div>اکنون، عرض جعبه همواره 150 پیکسل خواهد بود، بر روی هر مرورگری!

وسط چین کردن بلوکی از عناصر

تصور کنید که میخواهید یک وب سایت با عرض ثابت داشته باشید و محتوا در وسط صفحه نمایش قرار گیرند. شما معمولا از چنین کدی استفاده میکنید:

#content

{

width: 700px;

margin: 0 auto;

}

در چنین حالتی مجبور خواهید بود مدام از کدی شبیه به <div id="content"> برای قراردادن هر عنصر در وسط صفحه استفاده کنبد. البته در این حالت عنصر شما دارای حاشیه نیز خواهد شد. مسملا این کار جواب میدهد اما برای مرورگرهای ماقبل IE 6 هنوز هم مشکلاتی وجود دارد. برای رفع مشکل آنها از چنین کدی استفاده میشود:

body

{

text-align: center;

}

#content

{

text-align: left;

width: 700px;

margin: 0 auto;

}

تعیین مکان عمودی عناصر با CSS

تعیین مکان کردن عمودی با استفاده از جدول ها کاری است بسیار ساده. مثلا بریا این که یک عنصر از نظر عمودی در مرکز یک سلول قرار گیرد از این کد استفاده میکنیم : vertical-align: middle .

اما این کد در CSS کاربردی ندارد. در CSS از مقداردهی کردن ارتفاع خط با همان مقدار ارتفاع جعبه مورد نظری که متن در آن قرار دارد استفاده میکنیم.

مکان درون یک کانتینر

یکی از بهرتین چیزها درباره CSS این است که شما میتوانید یک شیء را به طور مطلق در هرمکانی که میخواهید درون سند خود قرار دهید. همچنین این کار اغلب موارد در مورد درون کانتینرها نیز معمول است. در CSS میتوانیم کد زیر را بریا کانتینر مورد نظر بنویسیم:

#container

{

position: relative

}

اکنون هر عنصر که درون این کانتینر باشد موقعیت آن مرتبط با همان کانتینر خواهد شد. عناصر را با کدی شبیه به این در صفحه قرار میدهیم:

<div id="container"><div id="navigation">...</div></div>برای این که مکان عنصر دقیقا 30 پیکسل از چپ و 5 پیکسل از بالای کانتینر فاصله داشته باشد، میتوانید از این دستورات استفاده کنید:

#navigation

{

position: absolute;

left: 30px;

top: 5px

}

هرچند شما به ظاهر میتوانستید از margin: 5px 0 0 30px نیز استفاده کنید اما در برخی موارد این کد کاربرد نخواهد داشت.

رنگ پس زمینه که تا پایین صفحه امتداد دارد

یکی از معایب CSS این است که نمیتوان آن را به صورت عمودی کنترل کرد. مثلا زمانی که شما ستونی دارید که میخواهید رنگ پس زمینه آن آبی باشد در حالی که رنگ صفحه سفید است. شما چنین کدی را برای پانل سمت راست صفحه خواهید نوشت:

#navigation

{

background: blue;

width: 150px;

}

اما مشکلی پیش می آید! از آنجا که ستون مورد نظر تا انتهای صفحه امتداد نمیباید، لذا رنگ آبی نیز در جایی قطع میشود.

متاسفانه تنها راه برای انجام این کار استفاده از تصویر بعنوان رنگ پس زمینه است. یعنی باید از تصویری استفاده کنیم که دقیقا برابر عرض صفحه باشد و رنگ بندی آن نیز دقیقا متناسب با انچه که میخواهیم باشد. سپس از این دستور استفاده کنیم:

body

{

background: url(blue-image.gif) 0 0 repeat-y;

}