facebook شماره تماس09331377032
خدمات طراحی سایت
طراحی و اجرای شبکه های کامپیوتری در کرمانشاه و شهرستانهای تابعه
انجام پروژه های دانشجویی
آموزش های طراحی وب
آموزشهای شبکه

Model در CSS

تمامی عنصر های HTML میتوانند بصورت یه باکس مطرح بشوند.
BOX Model در css را می توان یک جعبه فرض کرد که صفحه هایی در اطراف عناصر html قرار دارد و شامل margin , border , padding , content میشود.
BOX Model به ما این توانایی را می دهد تا محل border در اطراف عناصر html و فضای ارتباط عناصر ها با یدکدیگر را کنترل کنیم.

توضیح قسمت های مختلف:
Margin فضای اطراف Border رو را شامل می شود ، Margin تصویر و رنگ background ندارد و کاملا شفاف هست.
Border یک Border فضای اطراف عنصر و یا حاشیه عنصر رو شامل میشود Border با رنگ background آمیخته شده.
Padding فضای اطراف content مطالب رو شامل میشود. Padding با رنگ پیش زمینه box آمیخته شده.
Content مطالب باکس ، جایی که متن ها و تصاویر قرار داده میشن.
به منظور قرار دادن صحیح عرض و ارتفاع در یک عنصر و نمایش صحیح آن در تمامی مرورگر ها ، باید بدانیم که box model چگونه کار میکند.
طول و عرض یک عنصر
نکته مهم : وقتی شما عرض و ارتفاع یک عنصر رو مشخص میکنید ، در واقع عرض و ارتفاع content رو مشخص میکنید.
کل عرض عنصر زیر 300px هست.

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;


خب بهتره برای درک بیشتر این موضوع یه محاسبات زیاضی انجام بدیم
خب بهتره برای درک بیشتر این موضوع یه محاسبات زیاضی انجام بدیم

فرض کنید شما فضای 250 پیکسلی دارید.یه عنصر رو با عرض 250 پیکسل درست میکنیم:

عرض کل یک عنصر باید همانند زیر محاسبه بشه:
عرض کل:عرض مطالب + padding راست + padding چپ + marginراست + marginچپ + border راست + border چپ
ارتفاع کل یک عنصر باید همانند زیر محاسبه بشه:
ارتفاع کل:ارتفاع + padding بالا + padding پایین + marginبالا + marginپایین + border بالا + border پایین
مثال برای css box model

پیش نمایش
برچسب مطالب :
css چیست| قواعد نوشتاری زبان css | کلاس و id در css| چگونگی عملکرد css| تنظیم پس زمینه background در css | متن در css| فونت در css | لینک ها در css | لیستها در css | جداول در css| باکس Box Model در css | ویژگی css border | ویژگی css outline| ویژگی css margin | ویژگی css padding | گزینشگرهای گروهی در Css | خاصیت css dimension | خاصیت css display | خاصیت css position | خاصیت css floating | خاصیت css align | شبه کلاسها در css | شبه عناصر در css | نوار هدایت در css | گالری تصاویر در css| ایجاد تصاویر شفاف در css| خاصیت image sprites در css | انواع رسانه ها در css | انتخاب گرها در css| معرفی css3| حاشیه در css3| پس زمینه در css3| خاصیت css3 gradients| جلوه های متن در Css3| فونت در css3| تغییر شکل های 2 بعدی در css3| ترنسفرم های سه بعدی در css3 | خاصیت css3 transitions | انیمیشن در css3 | ستونهای چند گانه در css3 | رابط کاربری css3 |
css چیست
قواعد نوشتاری زبان css
کلاس و id در css
چگونگی عملکرد css
تنظیم پس زمینه background در css
متن در css
فونت در css
لینک ها در css
لیستها در css
جداول در css
باکس Box Model در css
ویژگی css border
ویژگی css outline
ویژگی css margin
ویژگی css padding
گزینشگرهای گروهی در Css
خاصیت css dimension
خاصیت css display
خاصیت css position
خاصیت css floating
خاصیت css align
شبه کلاسها در css
شبه عناصر در css
نوار هدایت در css
گالری تصاویر در css
ایجاد تصاویر شفاف در css
خاصیت image sprites در css
انواع رسانه ها در css
انتخاب گرها در css
معرفی css3
حاشیه در css3
پس زمینه در css3
خاصیت css3 gradients
جلوه های متن در Css3
فونت در css3
تغییر شکل های 2 بعدی در css3
ترنسفرم های سه بعدی در css3
خاصیت css3 transitions
انیمیشن در css3
ستونهای چند گانه در css3
رابط کاربری css3