خانه / آموزش CSS / بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
CSS-Box-Model-iktheme2"

تاریخ بروزرسانی: ۲۰ بهمن ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش دهم-آموزش مدل جعبه ای CSS یا CSS Box Model

قدم قبلی >< قدم بعدی
 مدل جعبه ای CSS
آموزش مدل جعبه ای CSS

 

مدل جعبه ای CSS 

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

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

مدل جعبه

توضیح بخش های مختلف:

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

مثال:

با اجرای کد بالا باید تصویر زیر را درخروجی ببینید:

 

نمونه ای از مدل جعبه

 

 

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

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

نکته مهم: هنگامی که ویژگی های عرض و ارتفاع یک عنصر را با CSS تنظیم می کنید، فقط عرض و ارتفاع محتوا را تعیین می کنید. برای محاسبه ابعاد کامل یک عنصر، شما همچنین باید حاشیه ها، پدینگ ها و مارجین ها را هم اضافه کنید.

فرض کنید می خواهیم یک عنصر <div> را به عرض کل ۳۵۰ پیکسل بسپاریم:

با اجرای کد بالا این تصویر را درخروجی می بینیم:

نمونه یک عکس

 

در اینجا نحوه محاسبه عرض را ذکر می کنم:
۳۲۰ پیکسل (عرض)
+ ۲۰ پیکسل (پد چپ + راست)
+ ۱۰ پیکسل (سمت چپ + راست)
+ ۰px (حاشیه سمت چپ + راست)
= ۳۵۰ پیکسل
عرض کلی یک عنصر باید به صورت زیر محاسبه شود:

مجموع عرض عناصر = عرض متن یا عنصر مورد نظر + حاشیه چپ + حاشیه راست + مارجین چپ + مارجین راست + حاشیه سمت چپ + حاشیه سمت راست

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

مجموع ارتفاع عنصر = ارتفاع + پدینگ بالا + پدینگ پایین + مارجین بالا + مارجین پایین + حاشیه بالا + حاشیه پایین

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

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15284


کانال تلگرام تیک تم

مطلب پیشنهادی

خصوصیات display در CSS

بخش هجدهم- آموزش خصوصیت display در CSS یا CSS Layout

  CSS Layout – خصوصیت display در CSS خصوصیت display در CSS مهمترین ویژگی CSS …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *