آشنایی با Box Model

آشنایی با Box Model

همه عناصر HTML را می توان به عنوان جعبه در نظر گرفت. در CSS زمانی که صحبت در مورد طراحی و صفحه آرایی است ، اصطلاح “box model” مورد استفاده قرار می گیرد.
مدل باکس CSS که در اصل جعبه ای است که در اطراف عناصر HTML بسته بندی می شود ، و متشکل از : حاشیه ها، مرز ها، و محتوای واقعی است.
مدل باکس اجازه می دهد تا مرزی در اطراف عناصر و فضای عناصر در ارتباط با عناصر دیگر قرار دهیم.

آشنایی با Box Model آشنایی با box model آشنایی با Box Model box

ابتدا از خارجی ترین جزء، توضیحات Box Model را آغاز می کنیم. همانطور که در تصویر فوق می بینیم خارجی ترین لایه margin نام دارد. کاری که margin انجام می دهد این است که فاصله یک تگ اچ تی ام ال (HTML) را از تگ دیگری مشخص می کند. به عبارت دیگر margin به فضایی گفته می شود که دور یک تگ اچ تی ام ال (HTML) را در بر می گیرد. به طور کلی margin در محاسبه اندازه یک تگ اچ تی ام ال (HTML) مورد محاسبه قرار نمی گیرد اما زمانیکه تگ های اچ تی ام ال (HTML) در کنار یکدیگر قرار می گیرند نقش مهمی ایفا می کند. برای روشن شدن این مسئله تصویر فوق را مد نظر قرار می دهیم. باکس سفید رنگ جایگاه متن اصلی تگ اچ تی ام ال (HTML) است. برای این باکس هم می توان width و هم height در نظر گرفت.

what_is_box_model_in_css آشنایی با box model آشنایی با Box Model what is box model in css
بلافاصله پس از این باکس اصلی که حاوی عبارات داخل تگ های اچ تی ام ال (HTML) است چیزی تحت عنوان padding قرار دارد. وظیفه padding این است که فاصله ای مابین محتوای تگ و border ایجاد کند. این فاصله غیر قابل مشاهده بود و صرفاً موجب می گردد که متن داخل تگ های اچ تی ام ال (HTML) از لبه باکس به هر میزان که بخواهیم فاصله بگیرند.
به طور کلی border این وظیفه را دارا است تا حاشیه ای به دور باکس اصلی یا همان باکس سفید رنگ اضافه کند. برای border می توان سه ویژگی border-width برای ضخامت، border-style برای شکل و border-color برای رنگ را در نظر گرفت.

شرح قسمت های مختلف:

  • Margin (حاشیه)- منطقه ای خالی در اطراف مرز است. حاشیه رنگ پس زمینه ای ندارد و به طور کامل شفاف است
  • Border (مرز)- مرز در اطراف گسترش و محتوا است. مرز تحت تاثیر رنگ پس زمینه جعبه قرار می گیرد
  • Padding (گسترش) – منطقه ای خالی در اطراف محتوا است. گسترش تحت تاثیر رنگ پس زمینه جعبه قرار می گیرد
  • Content (محتوا) – محتوای جعبه، جایی است که متن و تصاویر نشان داده می شود

علاوه بر این می توان border را به یکی از جهات بالا، پایین، چپ و یا راست تگ مد نظر اختصاص داد.
در مورد border ها همواره به خاطر داشته باشیم که اندازه آن ها در محاسبه اندازه کلی یک تگ مورد محاسبه قرار می گیرد. به طور مثال اگر تگی داشته باشیم به اندازه ۴۰ * ۷۰ و برای این تگ border یی در نظر گرفته باشیم به مقدار ۴px حال از این پس اندازه واقعی تگ ما به ۴۸*۷۸ افزایش خواهد یافت چرا که چهار پیکسل به سمت راست و چهار پیکسل به سمت چپ اضافه شده که جمعاً می شود ۸ پیکسل و با احتساب اندازه باکس اصلی width معادل می شود با ۴۸٫ قضیه در مورد height هم به این شکل است: ۴ پیکسل به بالا و ۴ پیکسل به پایین که جمعاً می شود ۸ پیکسل که با مد نظر قرار دادن ارتفاع باکس مد نظر با مقدار ۷۸ پیکسل مواجه خواهیم شد.

به منظور تنظیم صحیح عرض و ارتفاع یک عنصر در تمام مرورگرها، شما نیاز دارید بدانید که مدل جعبه چگونه کار می کند.

هنگامی که عرض و ارتفاع یک عنصر را با CSS تنظیم می کنید ، شما فقط عرض و ارتفاع منطقه محتوا را تنظیم می کنید. به منظور محاسبه اندازه کامل یک عنصر، باید padding، borders و margins را نیز اضافه کنید.

 

بیایید بصورت ریاضی محاسبه کنیم :

  ۲۵۰px عرض
  + ۲۰px چپ + راست “گسترش”
  + ۱۰px چپ + راست “مرز”
  + ۲۰px چپ + راست “حاشیه”
= ۳۰۰px    

فرض کنید که شما فقط ۲۵۰px فضا داشتید. بیایید یک عنصر با مجموع عرض ۲۵۰px ایجاد کنیم :

کل عرض عنصر باید مثل این محاسبه شود:
کل عرض عنصر = عرض + padding چپ + padding راست + مرز چپ + مرز راست + حاشیه چپ + حاشیه راست
ارتفاع کل یک عنصر نیز باید مثل این محاسبه شود:
کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + مرز بالا + مرز پایین + حاشیه بالا + حاشیه پایین

 

آشنایی با Box Model آشنایی با box model آشنایی با Box Model model box

خلاصه: آشنایی با Box Model

در اطراف هر جعبه ( محتوا رو به صورت جعبه یا باکس فرض کردیم) ، سه لایه وجود داره (پس بین دو عنصر در صفحه میتونه تا ۶ لایه وجود داشته باشه _ هر عنصر ۳ لایه _ ) .

padding یا همون فاصله ای که از محتوا تا خط حاشیه ایجاد میشه هست و برای مثال اگر برای محتوا رنگ زمینه در نظر گرفته باشید ، این رنگ در بخشی که با padding هم پر شده ، مشاهده میشه. مثل رنگ سفیدی که در تصویر بالا میبینید.

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

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

محتوا (content) میتونه متن و یا تصویری باشه که ما به صورت یک جعبه _ باکس _ نمایش میدهیم.

برای درک بهتر قضیه بیایید یک مثال عددی داشته باشیم ، فرض کنیم در مثال بالا پهنای content معادل ۲۵۰ پیکسل ، padding برابر ۱۰ پیکسل ، border برابر ۵ پیکسل و margin برابر با ۱۵ پیکسل هست.

حالا بگید پهنایی که این عنصر ( content ) در صفحه اشغال میکنه چقدر هست؟

مثال:آشنایی با Box Model

اگر پاسخ شما ۲۵۰ پیکسل و یا ۲۸۰ پیکسل هست باید بگم که اشتباه کردید ، همونطور که گفتم شما باید تمام مقادیر رو در نظر بگیرید.یعنی اینطور محاسبه کنید :

content = 250px

padding= (10px) x 2 = 20px

border = (5px) x 2 = 10px

margin = (15px) x 2 = 30px

———————————-

all = 310px

 

آموزش CSS آموزش طراحی وب

دسته بندی و برچسب

دیدگاه خود را بیان کنید