آموزش CSS – ويژگی ‌Box-Sizing در CSS3

در جلسه قبل از آموزش CSS با چیدمان چند ستونی در CSS3 آشنا شدید. در این بخش قصد داریم به ويژگی ‌Box-Sizing در CSS3 یپردازیم.

با قابلیت ‌Box-Sizing در CSS3 شما می توانید عرض عنصر را موثرتر کنترل کنید.

رندر عرض باکس با Box-sizing

بصورت پیش فرض, عرض یا ارتفاع اصلی باکس المان در صفحه وب بر اساس ویژگی width یا height , padding, border نمایش/رندر می شود.

برای مثال, اگر مقداری padding و border به المنت <div> با width 100% بدید, اسکرول بار افقی نمایان می شود . به مثال زیر توجه کنید :

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
}

.box {

width: 100%;

padding: 20px;

border: 5px solid #f08080;

}

این یکی از مشکلات معمول طراحان وب است که مدت زیادی با آن روبرو هستند, اما, ‌Box-Sizing در CSS3 مشکل را حل کرده و باعث شده چیدمان CSS بسیار ساده تر و بصری شود.

خصوصیت box-sizing مقدار box-model را کاملا به مقدار پیش فرض تغییر می دهد, در واقع هر padding یا border ای که روی محتوا اعمال شده است.

بنابراین عرض و ارتفاع رندر شده المان برابر با مقدار مشخص شده width و height در CSS قرار می دهد.

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    box-sizing: border-box;
}

.box {

width: 100%;

padding: 20px;

border: 5px solid #f08080;

box-sizing: border-box;

}

اگر خروجی بالا را ببنید, دیگر اسکرول بار نمایش داده نمی شود.

نکته: زمانی که از ویژگی box-sizing استفاده می کنید, مقدار width و height بخش محتوا محاسبه و border و padding از ویژگی های مشخص شده width , height کم می شود.

ایجاد چیدمان با Box-Sizing

با ویژگی ‌Box-Sizing در CSS3 می توانید یک لایه بندی چند ستونی را با درصد به سادگی بسازید.

حالا دیگر نگران اندازه نهایی المانی که به آن padding یا border اضافه می کنید, نخواهید بود.

مثال زیر به شما نحوه ساخت یک طرح بندی دو ستونی که هر ستون width برابری دارند و با ویژگی float در کنار هم دیگر قرار گرفتند.

.box {
    width: 50%;
    padding: 20px;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}

.box {

width: 50%;

padding: 20px;

background: #f2f2f2;

float: left;

box-sizing: border-box;

}

مشابه آن شما می توانید طرح بندی های پیچیده تری را با همین تکنیک ساده ایجاد کنید.

.box {
    width: 30%;
    padding: 20px;
    margin-left: 5%;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    margin-left: 0;
}