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

مفهوم 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;
}

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