آموزش کامل کار با 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 : میزان اندازه یا فاصله عنصر از بیرون با دیگر عناصر
تصویر زیر دقیقا داره موارد بالا را نشون میده :
حالا یه مثال عملی میزنیم تا کامل این جریان باکس مدل رو متوجه شوید ، در مثال اول من فقط اندازه عرض و ارتفاع یک عنصر رو مشخص میکنم یعنی از Padding و Margin و Border استفاده نمیکنم ببینیم چی میشه !
مثال شماره ۱ : خب اندازه عرض رو ۱۵۰ پیکسل و ارتفاع ۵۰ پیکسل تنظیم کردیم.
1 2 3 4 5 6 7 8 |
<style> div{ width:150px; height:50px; } </style> |
مثال شماره ۲ : اندازه عرض ۱۵۰ پیکسل و ارتفاع ۵۰ – ویژگی های Padding,Margin و Border با اندازه های مشخص شده نیز اضافه شده اند.
1 2 3 4 5 6 7 8 9 10 11 |
<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 ایجاد نمی شود، بلکه باید اندازه ویژگی های زیر را نیز اضافه کنیم :
لطفا به دستورات زیر توجه نمایید :
1 2 3 4 5 6 |
div { width: 320px; padding: 10px; border: 5px solid blue; margin: 10px; } |
طبق دستورات بالا میخوایم اندازه عرض عنصر رو مشخص کنیم یا محاسبه کنیم :
اندازه کل عرض = اندازه پدینگ از سمت راست + اندازه پدینگ از سمت چپ + اندازه بوردر از سمت راست + اندازه بوردر از سمت چپ + اندازه مارجین از سمت راست + اندازه مارجین از سمت چپ نتیجه محاسبه میشه : ۳۷۰ پیکسل – یعنی اندازه عرض واقعی عنصر ما میشه ۳۷۰px حالا طبق دستورات زیر میخوایم اندازه واقعی ارتفاع یک عنصر را مشخص کنیم :
1 2 3 4 5 6 |
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 : باعث میشه اندازه ها از همدیگر تفکیک بشن
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
مثال شماره ۱ :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div.container{ width: 100%; border: 1px solid black; } div.box{ box-sizing: border-box; width: 50%; border: 3px solid red; float: left; } </style> |
مثال شماره ۲ : استفاده از این ویژگی در انتخابگر کل یا سراسری ( * ) یعنی بروی تمامی عناصر موجود در صفحه اعمال می شود.
1 2 3 4 5 6 7 |
<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 ) رسیدیم، امیدوارم که بطور کامل با این ویژگی آشنا شده باشید و مشکلی در این جلسه براتون وجود نداشته باشد.
بیشتر بخوانیم:
دیدگاهتان را بنویسید