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

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

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

 

مدل جعبه ای CSS 

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

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

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

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

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

مثال:

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

 

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

 

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

پاسخی بگذارید

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