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

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

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

Free-Learn

Box Sizing در CSS3

باکس سایزینگ یا به انگلیسی Box Sizing یکی از ویژگی هایست که در زبان سی اس اس نسخه ۳ یعنی CSS3 اضافه شده است، که با استفاده از این ویژگی میتوانیم اندازه عرض و ارتفاع یک عنصر را به بهترین شکل ممکن محاسبه کرد.

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

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

Free-Learn

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

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

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

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

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

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

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

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

Free-Learn

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

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

امتحان کنید

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

امتحان کنید

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

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

نتیجه گیری

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

Free-Learn

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

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

  • Padding
  • Border
  • Margin

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

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

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

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

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

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

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

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

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

Free-Learn

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

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

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

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

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

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

 

امتحان کنید

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

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

Free-Learn

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

مثال شماره ۱ :

امتحان کنید

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

پیشنهاد میکنم حتما آموزش کامل کار با انتخابگرها در CSS را مشاهده نمایید.


امتحان کنید

Free-Learn

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

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

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

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

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

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب