٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت. مدل جعبه CSS در CSS ، هنگام صحبت در مورد طراحی و طرح ، از اصطلاح “مدل جعبه” استفاده می شود. مدل جعبه 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;
}

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

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

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

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها