آموزش مدل جعبه CSS

9 جولای 2021

تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت.


مدل جعبه CSS

در CSS ، هنگام صحبت در مورد طراحی و طرح ، از اصطلاح “مدل جعبه” استفاده می شود.

مدل جعبه CSS در اصل جعبه ای است که در اطراف هر عنصر HTML قرار دارد. این شامل: حاشیه ، حاشیه ، پر کردن ، و محتوای واقعی است. تصویر زیر مدل جعبه را نشان می دهد:

توضیح قسمتهای مختلف:

  • محتوا – محتوای کادر ، جایی که متن و تصاویر در آن ظاهر می شود
  • Padding – منطقه اطراف محتوا را پاک می کند. بالشتک شفاف است
  • مرز – مرز A که در اطراف لایه و محتوای می رود
  • حاشیه – منطقه ای را در خارج از مرز پاک می کند. حاشیه شفاف است

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

مثال

نمایش مدل جعبه:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

عرض و ارتفاع یک عنصر

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

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

مثال

این عنصر <div> عرض کلی 350px خواهد داشت:

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

در اینجا محاسبه:

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

عرض کل عنصر = عرض + بالشتک چپ + بالشتک راست + حاشیه چپ + حاشیه راست + حاشیه چپ + حاشیه راست

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

ارتفاع کل عنصر = ارتفاع + بالشتک بالا + بالشتک پایین + حاشیه بالا + حاشیه پایین + حاشیه بالا + حاشیه پایین

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.