فصل css3 خلاصه مطالب جلسه 2 مفهوم box-model در css

سلام دوستان طبق عادت همیشه خلاصه مطالبی که استاد تو این جلسه رو گفتن رو قرار دادم همچنین خیلی ممنونم از استاد صالحی عزیز که از این کار کوچک بنده استقبال کردن و بقیه هم دوره ای های عزیزم که سعی کردن بیان و تجربه ها و مطلب جدید و به درد بخوری که پیدا میکنن رو اینجا ب اشتراک بزارن تا بقیه هم استفاده بکنن تو این خلاصه هم سعی شده از تاپیک های بقیه دوستان هم که بهتر از بنده بودن هم استفاده کنم تا ی خلاصه ی جامع تری بتونم بنویسم تا برای مرور بچه ها راحت تر باشن

مفهوم BoxModel  : ما هر تگی که در داخل اسناد html امون داریم ماهیت اون ها یک Box-Model  هست یک مربع یا مستطیل که دارای طول و عرض هست همچنین ترکیب طول عرض و  margin  و padding  و border به یک عنصر باعث

باعث ایجاد این مفهوم می شود

نتیجه : چیزهایی که یک باکس مدل رو میان میسازن در وهله ی اول طول و عرض اون و بعد margin  و border  و padding و  طول عرض خود محتوا یا کانتنت امون هست همچنین تمام این margin و border و padding در نهایت به صورت پیش فرض در داخل طول عرض عنصرمون تاثیر داره و اون رو تغیر میکنه 

معرفی پراپرتی ها 

width : برای دادن عرض به المانمون از این پراپرتی استفاده میکنیم

height :  برای دادن طول به المانمون از این پراپرتی استفاده میکنیم

color : برای دادن رنگ به المانمون از این پراپرتی استفاده میکنیم که برای متن ها میتونیم با این پراپرتی ها رنگ رو تغیر بدهیم

background-color : برای دادن رنگ به بگ گراند المنت امون میایم و از این پراپرتی استفاده میکنیم

text-align میاد و وضعیت اون متن امون رو داخل خط داخلش مشخص میکند و مقدار های راست چپ و وسط  رو میگیرد 

معرفی پراپرتی ها جدید :

border میاد هاشیه برای اون المنت امون ایجاد میکند و دارای اجزایی هم هست  برای استفاده از اون هم اولین مقداری که میگیرد  ذخامتش هستش دومین مقدار نوع اون هست که میتونه Solid یا dash و ...  سومین مقدار هم رنگ اون هستش مثال border : 2px solid #fff  همچنین این پراپرتی انواع مختلفی هم دارد

border-Radius برای گرد کردن هاشیه های اون المنت امون میاد و استفاده میشه

border-width مربوط به ضخامت بوردر میباشد

border-style:

خاصیت border-style مشخص می کند که چه نوع لبه ای نمایش داده شود.

نکته: هیچکدام از خواص مربوط به Border نمایش داده نمی شود مگر اینکه خاصیت border-style تنظیم شده باشد.

مقادیر خاصیت border-style:

none: هیچ لبه ای نمایش داده نمی شود

dotted: لبه ها به صورت نقطه نقطه ای نمایش داده می شود

dashed: لبه ها به صورت خط تیره نمایش داده می شود

double: دو لبه نمایش داده می شود

groove: یک لبه سه بعدی گود دار نمایش داده می شود

ridge: یک لبه سه بعدی برجسته نمایش داده می شود

inset: یک لبه سه بعدی inset نمایش داده می شود

outset: یک لبه سه بعدی outset نمایش داده می شود

خاصیت border-color:

• name: نام رنگ باید مشخص شود مانند "red"
• RGB: به صورت RGB مشخص می شود مانند "(rgb(۲۵۵,۰,۰"
• Hex: به صورت هگزا دسیمال مشخص می شود مانند ff۰۰۰۰ #

• این خاصیت همچنین با مقدار "transparent" نیز می تواند تنظیم شود.(لبه به رنگ Background خواهد بود)

• نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

خلاصه نویسی مثل: ;border:۳px solid black

نحو ه ی استفاده بوردر به صورت تکی :Top,Right,bottom,left

مثل: border-top-width

border-right-width

border-bottom-width

border-left-width

border-top-style

border-right-style

border-bottom-style

border-left-style

border-top-color

border-right-color

border-bottom-color

border-left-color 

padding  برای انواع جهت ها هست جهت های بالا و پایین و راست و چپ  و به معنی حاشیه یا فاصله  داخلی محتوا از لبه ها یا حاشیه های والد اون  است  عنصر درونی به نسبت حاشیه های والدش میاد و فاصله میگیرد

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

ما برای مارجین ها و پدینگ ها اگه یک وقت مقادیر جهت هامون متفاوت بود میتونیم بیایم و برای رعایت خلاصه نویسی اون در  داخل پراپرتی مارجین یا پدینگ خالی اون از چهار مقدار استفاده بکنیم   به صورت زیر

.box-model{
padding : 0 0 0 0 }

padding_top  padding_right  padding_bottom  padding_left

نکته » اگر مقدار هایی که خواستیم بدهیم برابر صفر بودن  نیازی به مشخص کردن واحد اون نیست مثلا لازم نیست

صفر پیکسل

نکته : ما در کد نویسی وقتی طرح رو از طراح میگیریم به ما یک طول عرض خود المان رو میاد و میده و این طول عرض جدا از اون پدینگ و مارجین و بوردر هاست و ما باید طوری طراحی کنیم که این طول عرض این عنصر در نهایت همون اندازه ای باشه که طراح گفته برای همین باید بیایم و از مفهوم باکس سایزینگ استفاده بکنیم Box-Sizing که وقتی این ویژگی رو قرار میدهیم مرورگر دیگه کاری به اضافه کردن بوردر و پدینگ به عنصرمون به صورت پیش فرض دیگه نداره

ویژگی  borderBox  رو برای تمام عناصر امان در نظر بگیریم   Box-sizing : border-box این شکلی همون طول عرض اصلی رو قرار میدهد 

استایل استریکس یا استار * {}  به معنی تمام تگ های موجود در سند میاد و استایل رو بهش میدهد که پدینگ ها جزو طول و ارتفاع اون عنصر امون نیان و در نظر گرفته نشوند و سعی شود در اینجا ما مقادیر مارجین و پدینگ هم به صورت پیش فرض بیایم و صفر در نظر بگیریم 

*{
box-sizing : border-box;
margin:0;
padding:0;
}

استفاده از این دستور میاد و تنظیمات پیش فرض مرورگر رو تغیر میدهد