آموزش کامل Box Model یا باکس مدل در CSS

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

آموزش کامل Box Model یا باکس مدل در CSS

Free-Learn

Box Model چیست؟

اول از هر چیزی بدونید تمامی تگ ها ( عناصر ) در یک صفحه وب حالت باکس مدل یا Box Model دارند، یا میتونیم بگیم حالت یک جعبه دارند که این جعبه یا باکس دارای چندین ویژگی به شرح زیر می باشد :

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

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

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

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

آموزش کامل Box Model یا باکس مدل در CSS
برای مشاهده در اندازه اصلی کلیک نمایید

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

  • خونه – وسیله های داخل خونه میشه محتوا، فاصله بین وسیله ها تا دیوار ها میشه padding و خوده دیوار و پنجره ها میشه border و در نهایت اگه این خونه حیاط هم داشت اون حیاط میشه margin
  • و بطور کلی هر چیز دیگه ای که یه حالتی شبیه به خونه داشته باشه میتونیم بگیم حالت باکس هست

Free-Learn

Box Model یا باکس مدل در CSS

پس ما متوجه شدیم که هر عنصر در CSS میتواند دارای یسری ویژگی هایی همچون Padding و Border می باشد و هر یک از این ویژگی ها نیز بخودی خود میتواند بروی اندازه یک عنصر تاثیر بگذارد.

خب یعنی چی میتوانند روی اندازه یک عنصر تاثیر بگذارند؟! ببینید اگه مثلا من اندازه عرض یک عنصر را ۱۲۰ پیکسل تنظیم کردم و بفرض مثال از ویژگی Padding هم با اندازه ۱۰ پیکسل استفاده کردم.

حال اندازه ۱۰ پیکسل Padding نیز میاد روی اندازه عرض عنصر و باهمدیگر جمع می شوند و این می شود اندازه کل عرض یک عنصر.

لطفا به مثال های زیر توجه نمایید تا بطور کامل متوجه جریان Box Model یا باکس مدل در CSS شوید :

در مثال زیر ۲ باکس وجود دارد، باکس اولی دارای ویژگی های Padding,Border می باشد ولی باکس دومی فاقد این ویژگی ها می باشد، حال تفاوت این ۲ باکس را مشاهده نمایید.

امتحان کنید

اگه لطف بفرمایید و بروی دکمه ( امتحان کنید ) کلیک نمایید، خب همانطور که مشاهده میکنید اندازه عرض ( Width ) و اندازه ارتفاع ( Height ) هر ۲ باکس یکسان می باشند.

سوال : اگه اندازه عرض و ارتفاع یکسان می باشد پس چرا در خروجی اندازه باکس شماره ۱ از باکس شماره ۲ بیشتر و بزرگتر می باشد؟!

پاسخ : چون در باکس شماره ۱ از ویژگی های Padding,Border استفاده شده است و گفتیم که این ویژگی ها روی اندازه اصلی یک عنصر تاثیر میگذراند.

ادامه پاسخ : در نتیجه اندازه کل یک عنصر با محاسبه ی تمامی ویژگی های Padding , Border , Width و Height بدست میاید.

Free-Learn

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

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

  • Padding
  • Border

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

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

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

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

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

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

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

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

Free-Learn

معرفی ویژگی Box Sizing در CSS

خب دست نگه دارید ! دیگه لازم نیست حتما و بصورت دستی اندازه های یک عنصر که ممکنه شامل ویژگی های Padding , Border باشه رو محاسبه کنید.

با وجود ویژگی Box Sizing دیگه به راحتی هرچقدر میخواید padding یا border اضافه کنید و اصلا نگران اضافه شدن این اندازه به اندازه اصلی عنصرتون نباشید، چون باکس سایزینگه دیگه ..

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

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

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

پیشنهاد میکنم حتما آموزش ویژگی box-sizing را در CSS مشاهده نمایید.

Free-Learn

در کجا باید از باکس مدل استفاده کنم !

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

پس باکس مدل یه اصطلاح هست و میگه که آقا مثلا هر یک از عناصر درون صفحه میتونن و ممکنه ویژگی padding و border داشته باشند فقط همین.

پس تا زمانی که شما از box-sizing استفاده نکنید خب مجبورید که حواستون به اون اندازه ها باشه که یه موقع مثلا اگه اندازه border اضافه شد اون عنصر اندازش بزرگتر از اون چیزی که مخوایم نشه

ولی در صورت استفاده از box-sizing دیگه اصلا لازم نیست نگران این اندازه ها باشید و اینکه بخواید بصورت دستی بشینید و اندازه اصلی یه عنصر رو محاسبه کنید

کافیه فقط box-sizing رو اضافه کنید به همین راحتی ، دیگه بجای اینکه اندازه های border یا padding رو بندازه روی اندازه اصلی عنصر ، میاد و این اندازه هارو میریزه تو خوده عنصر ( هست میگن طرف درداشو میریزه تو خودش ) اینم همونه و دیگه اجازه نمیده اون اندازه ها به بیرون دَرز کنند.

Free-Learn

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