آموزش کامل کار با Box Sizing در CSS3

Box Sizing در CSS3

فهرست عناوین

باکس سایزینگ یا به انگلیسی Box Sizing یکی از ویژگی هایست که در زبان سی اس اس نسخه ۳ یعنی CSS3 اضافه شده است، که با استفاده از این ویژگی میتوانیم اندازه عرض و ارتفاع یک عنصر را به بهترین شکل ممکن محاسبه کرد. این ویژگی از اون ویژگی های هس که شاید خیلی براتون گیج کننده باشه یا شاید تا الان از این ویژگی درک درستی پیدا نکردید و در کل شاید هیچوقت متوجه عملکرد این ویژگی نشده اید. ولی من در این جلسه ( کار با Box Sizing در CSS3 ) میخوام شمارو بطور کامل با این ویژگی آشنا کنم، جوری که در پایان جلسه دیگه بطور کامل با این ویژگی آشنا شده باشید و کامل اونو درک کرده باشید. پس با من همراه باشید.

مدل باکس یا Box Model در یک صفحه وب

خب یعنی چه مدل باکس !؟ تمامی عناصر یا تگ های HTML در یک صفحه وب حالت باکس دارند، یعنی شبیه یک جعبه می باشند که این جعبه چندین ویژگی داره :

یعنی در واقع میتونیم بگیم که هر یک از عناصر در یک صفحه وب میتوانند ویژگی هایی زیر را داشته باشند :

اندازه عرض یا Width
اندازه ارتفاع یا Height
اندازه پدینگ یا Padding
اندازه خط دور لبه یا Border
اندازه مارجین یا Margin

یه توضیح کوتاه برای ویژگی های موجود در لیست بالا :

Width : اندازه عرض یک عنصر را مشخص میکند
Height : اندازه ارتفاع یک عنصر را مشخص میکند
Padding : اندازه یا فاصله داخلی متن موجود در عنصر با دیواره خود عنصر
Border : اندازه خط دور لبه ی عنصر
Margin : میزان اندازه یا فاصله عنصر از بیرون با دیگر عناصر

تصویر زیر دقیقا داره موارد بالا را نشون میده :

آموزش کامل کار با Box Sizing در CSS3 — برای مشاهده در اندازه اصلی بروی تصویر کلیک نمایید

حالا یه مثال عملی میزنیم تا کامل این جریان باکس مدل رو متوجه شوید ، در مثال اول من فقط اندازه عرض و ارتفاع یک عنصر رو مشخص میکنم یعنی از Padding و Margin و Border استفاده نمیکنم ببینیم چی میشه !

مثال شماره ۱ : خب اندازه عرض رو ۱۵۰ پیکسل و ارتفاع ۵۰ پیکسل تنظیم کردیم.

<style>

div{
 width:150px;
 height:50px;
}

</style>

<style>

div{

width:150px;

height:50px;

}

</style>

مثال شماره ۲ : اندازه عرض ۱۵۰ پیکسل و ارتفاع ۵۰ – ویژگی های Padding,Margin و Border با اندازه های مشخص شده نیز اضافه شده اند.

<style>

div{
 width:150px;
 height:50px;
 padding:15px;
 margin:20px;
 border:5px solid black;
}

</style>

<style>

div{

width:150px;

height:50px;

padding:15px;

margin:20px;

border:5px solid black;

}

</style>

خب ۲ تا مثال بالا رو مشاهده نمودید؟! حالا بگید ببینم آیا اندازه باکس موجود در مثال شماره ۱ با باکس موجود در مثال شماره ۲ یکی است؟؟

پاسخ : خیر اندازه این ۲ باکس باهمدیگر فرق میکنند و باکس شماره ۲ در مثال شماره ۲ بزرگتر می باشد، به دلیل اینکه در مثال شماره ۲ ویژگی های Padding,Margin,Border با اندازه های مشخص اضافه شده اند.

نتیجه گیری

پس نتیجه میگیریم که اندازه واقعی یک باکس متن با استفاده از ویژگی های Width,Height,Padding,Margin و Border مشخص می شود، لذا ما باید اندازه هامون رو به نسبت این ویژگی ها مشخص نماییم.

نحوه محاسبه اندازه واقعی یک عنصر

همونطور که گفتم اندازه واقعی یک عنصر صرفا از طریق ویژگی Width و Height ایجاد نمی شود، بلکه باید اندازه ویژگی های زیر را نیز اضافه کنیم :

لطفا به دستورات زیر توجه نمایید :

div {
 width: 320px;
 padding: 10px;
 border: 5px solid blue;
 margin: 10px;
}

div {

width: 320px;

padding: 10px;

border: 5px solid blue;

margin: 10px;

}

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

اندازه کل عرض = اندازه پدینگ از سمت راست + اندازه پدینگ از سمت چپ + اندازه بوردر از سمت راست + اندازه بوردر از سمت چپ + اندازه مارجین از سمت راست + اندازه مارجین از سمت چپ نتیجه محاسبه میشه : ۳۷۰ پیکسل – یعنی اندازه عرض واقعی عنصر ما میشه ۳۷۰px حالا طبق دستورات زیر میخوایم اندازه واقعی ارتفاع یک عنصر را مشخص کنیم :

div {
 height: 50px;
 padding: 10px;
 border: 5px solid blue;
 margin: 10px;
}

div {

height: 50px;

padding: 10px;

border: 5px solid blue;

margin: 10px;

}

محاسبه اندازه ارتفاع عنصر طبق دستورات بالا :

اندازه کل ارتفاع = اندازه پدینگ از سمت بالا + اندازه پدینگ از سمت پایین + اندازه بوردر از سمت بالا + اندازه بوردر از سمت پایین + اندازه مارجین از سمت بالا + اندازه مارجین از سمت پایین

نتیجه محاسبه میشه : ۱۰۰ پیکسل – یعنی اندازه ارتفاع واقعی عنصر ما میشه ۱۰۰px

خب حالا که بطور کامل با جریان باکس مدل آشنا شدید بریم برای یادگیری جریان Box Sizing در CSS3 که این ویژگی به کمک ما اومده تا بتونیم خیلی بهتر اندازه یک عنصر را مشخص کنیم.

آموزش کامل کار با Box Sizing در CSS3

ما گفتیم علاوه بر اندازه Width و Height ، ویژگی های Padding,Margin,Border هم بروی اندازه عرض و ارتفاع یک عنصر تاثیر میزارن.

حالا باکس سایزینگ یا Box Sizing در CSS3 چکار میکنه برای ما، بطور کلی بدونید باکس سایزینگ میاد و اندازه عرض و ارتفاع یک عنصر رو با اندازه ویژگی های Padding,Margin,Border تفکیک میکنه.

یعنی از هم جداشون میکنه و نمیزاره اندازه های ویژگی های Padding,Margin,Border روی اندازه عرض و ارتفاع تاثیر بزاره، برای اینکه بطور کامل متوجه عملکرد این ویژگی شوید لطفا به مثال زیر توجه نمایید.

این ویژگی ۲ مقدار زیر را میپذیرد :

Content-box : بصورت پیشفرض این گزینه فعاله و اندازه هارو از هم تفکیک نمیکنه
Border-box : باعث میشه اندازه ها از همدیگر تفکیک بشن

<style>

div.t1{
 width:300px;
 height:70px;
 padding:20px;
 margin:10px;
 border:5px solid black;
}

div.t2{
 box-sizing:border-box;
 width:300px;
 height:70px;
 padding:20px;
 margin:10px;
 border:5px solid black;
}

</style>

<style>

div.t1{

width:300px;

height:70px;

padding:20px;

margin:10px;

border:5px solid black;

}

div.t2{

box-sizing:border-box;

width:300px;

height:70px;

padding:20px;

margin:10px;

border:5px solid black;

}

</style>

در مثال بالا خب همونطور که میبینید اندازه های هر ۲ باکس دقیقا یکی هستند، ولی پس چرا باکس اولی از باکس دوم بزرگتره؟ خب برای اینکه باکس اول از ویژگی box-sizing استفاده نکرده.

به همین دلیل در باکس اول اندازه ویژگی های Padding,Margin و Border میره روی اندازه عرض و ارتفاع و با هم جمع میشن و در نتیجه اندازه عرض و ارتفاع بیشتر میشه.

مثال های بیشتر از کار با Box Sizing در CSS3

مثال شماره ۱ :

<style>

div.container{
 width: 100%;
 border: 1px solid black;
}

div.box{
 box-sizing: border-box;
 width: 50%;
 border: 3px solid red;
 float: left;
}

</style>

<style>

div.container{

width: 100%;

border: 1px solid black;

}

div.box{

box-sizing: border-box;

width: 50%;

border: 3px solid red;

float: left;

}

</style>

مثال شماره ۲ : استفاده از این ویژگی در انتخابگر کل یا سراسری ( * ) یعنی بروی تمامی عناصر موجود در صفحه اعمال می شود.

<style>

*{
 box-sizing: border-box;
}

</style>

<style>

box-sizing: border-box;

}

</style>

پشتیبانی مرورگرها از ویژگی box-sizing در CSS3

این ویژگی برای نمایش در مرورگرهای مدرن مشکلی نداره و این مرورگرها بخوبی از این ویژگی پشتیبانی میکنند، فقط برخی از نسخه های قدیمی این مرورگرها از این ویژگی پشتیبانی نمیکنند که ما باید یسری دستور پیشوندی به شرح جدول زیر برای رفع این مشکل مناسب هریک از مرورگرهای اینترنتی استفاده نماییم.

در جدول زیر از نسخه ی مشخص شده به بعد این ویژگی در مرورگرها مدرن پشتیبانی می شود.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	از نسخه ۱۰٫۰ به بالا	از نسخه ۲۹٫۰ به بالا	۹٫۵	از ۵٫۱ به بالا	۸٫۰

در جدول زیر از نسخه ی مشخص شده به بعد باید از دستور پیشوندی زیر استفاده نمایید.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۴٫۰ -webkit-	۲٫۰ -moz-	–	۳٫۲ -webkit-	–

خب دوستان خسته نباشید به پایان این جلسه ( آموزش کامل کار با Box Sizing در CSS3 ) رسیدیم، امیدوارم که بطور کامل با این ویژگی آشنا شده باشید و مشکلی در این جلسه براتون وجود نداشته باشد.

بیشتر بخوانیم:

آموزش کامل کار با Box Sizing در CSS3

Box Sizing در CSS3

مدل باکس یا Box Model در یک صفحه وب

نحوه محاسبه اندازه واقعی یک عنصر

آموزش کامل کار با Box Sizing در CSS3

مثال های بیشتر از کار با Box Sizing در CSS3

پشتیبانی مرورگرها از ویژگی box-sizing در CSS3

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Box Sizing در CSS3

مدل باکس یا Box Model در یک صفحه وب

نحوه محاسبه اندازه واقعی یک عنصر

آموزش کامل کار با Box Sizing در CSS3

مثال های بیشتر از کار با Box Sizing در CSS3

پشتیبانی مرورگرها از ویژگی box-sizing در CSS3

مطالب زیر را حتما مطالعه کنید

آموزش انیمیشن‌سازی با CSS

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

DOM چیست و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ