۲۳
خرداد

جلسه ۱۰ : مدل کاری (box model) در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تمام عناصر HTML را می توان به عنوان یک Box در نظر گرفت. اصطلاح مدل کاری یا box model در CSS طرح box یک عنصر html و فضای داخلی و خارجی آن را توصیف می کند. مدل کاری در CSS اساسا جعبه ، مربع یا مستطیلی است که در اطراف هر عنصر HTML قرار می گیرد.که این شامل: margins, borders, padding و محتوای آن عنصر می شود. در ادامه ی این آموزش توضیحات بیشتری را در مورد box model در CSS ارائه کرده ایم.

مدل کاری در CSS

در ادامه شما را با مفاهیم box model در CSS و style هایی که با مدل کاری در CSS مرتبط است آشنا می کنیم.

تصویر زیر مفهوم box model در CSS و ویژگی های آن را به خوبی نشان می دهد:

مدل کاری در CSS

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

Content : محتوای box، جایی که متن و تصاویر ظاهر می شود.
Padding : فضای حاشیه ی داخلی box عنصر html است.
Border : خط مرزی اطراف کادر box را توصیف می کند.
Margin : فضای حاشیه ی خارجی box عنصر html است.

box model در CSS اجازه می دهد تا فضای داخلی و خارجی یک عنصر و خط مرزی box را مشخص کنید:

مثال : تعیین قالب کلی عنصر

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

div {

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

}

خودتان امتحان کنید »

width (عرض) و ارتفاع (height) یک عنصر html

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

نکته: زمانی که خصوصیات width و height یک عنصر html را مشخص می کند در واقع فقط عرض و ارتفاع محتوای عنصرا را تعریف می کنید.

برای تعیین اندازه ی کامل یک عنصر html باید خصوصیات padding, border و margins را نیز تعریف کنید.

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

مثال : حالت کامل تر تعیین قالب عناصر

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

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

}

خودتان امتحان کنید »

محاسبه ۳۵۰px برای عنصر فوق به صورت زیر است:

(۳۲۰px (width
+ (۲۰px (left + right padding
+ (۱۰px (left + right border
+ (۰px (left + right margin
= ۳۵۰px

width (عرض) کامل یک عنصر html را باید به صورت زیر محاسبه کرد:

محاسبه عرض کامل یک عنصر = width + left padding + right padding + left border + right border + left margin + right margin

height (ارتفاع) کامل یک عنصر html را باید به صورت زیر محاسبه کرد:

محاسبه ارتفاع کامل یک عنصر = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

کلام آخر

هر یک از عناصر html در یک صفحه وب دارای یک اندازه و حد و مرز مشخصی می باشند، که این اندازه و حد و مرز با استفاده از box model در CSS برای عناصر مختلف تعریف می شود، از این رو برای تعیین اندازه و مرز صحیح هر عنصر html باید نحوه کار با ویژگی های مدل کاری در CSS را طبق مباحث فوق بدانید.