این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کامل Box Model یا باکس مدل در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل Box Model یا باکس مدل در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
Box Model چیست؟
میگن تمامی تگ ها در یک صفحه وب حالت باکس مدل یا Box Model دارند، یا میتونیم بگیم حالت یک جعبه دارند که این جعبه یا باکس دارای چندین ویژگی به شرح زیر می باشد :
- اندازه عرض یا Width
- اندازه ارتفاع یا Height
- اندازه پدینگ یا Padding
- اندازه بوردر یا خط دور لبه یا Border
- اندازه مارجین یا Margin
تصویر زیر مدل باکس بودن یک عنصر رو در یک صفحه وب نشان میدهد :
این یعنی یک باکس داخل خودش متن / محتوا داره، بعدش میتونه Padding داشته باشه و بعدش دوباره میتونه Border و در نهایت هم میتونه Margin داشته باشه، و همه ی اینها میتونن روی اندازه یک تگ تاثیر بزارن.
Free-Learn
Box Model یا باکس مدل در CSS
پس ما متوجه شدیم که هر تگ میتونه دارای ویژگی های Padding , Border و.. می باشد و هر یک از این ویژگی ها نیز بخودی خود میتونن روی اندازه یک عنصر تاثیر بگذارند.
خب یعنی چی میتونن روی اندازه یک عنصر تاثیر بگذارند؟! ببینید اگه مثلا من اندازه عرض ( Width ) یک عنصر را ۱۲۰ پیکسل تنظیم کردم و بفرض مثال از ویژگی Padding هم با اندازه ۱۰ پیکسل استفاده کردم، اینها روی هم محاسبه میشن.
مثال شماره ۱ : در مثال زیر ۲ باکس وجود داره، تو باکس اولی از ویژگی های Padding و Border استفاده نشده ولی در باکس دومی از ویژگی های Padding و Border استفاده شده.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .box-1{ background-color:#282a35; width:200px; height:70px; } .box-2{ background-color:#282a35; width:200px; height:70px; border:5px solid black; padding:10px; } </style> |
Free-Learn
نحوه محاسبه اندازه واقعی یک عنصر
برای محاسبه اندازه واقعی یک عنصر که از ویژگی های Padding و Border استفاده کرده باشه باید بصورت زیر عمل کنیم :
اندازه کل عرض = اندازه Padding از سمت راست + اندازه Padding از سمت چپ + اندازه Border از سمت راست + اندازه Border از سمت چپ
اندازه کل ارتفاع = اندازه Padding از سمت بالا + اندازه Padding از سمت پایین + اندازه Border از سمت بالا + اندازه Border از سمت پایین
مثال : محاسبه اندازه واقعی یک عنصر بهمراه ویژگی های Padding و Border
|
1 2 3 4 5 6 |
div { width: 320px; height: 50px; padding: 10px; border: 5px solid blue; } |
- اندازه Width میشه : ۳۵۰px
- اندازه Height میشه : ۸۰px
Free-Learn
تفکیک اندازه ها از همدیگه با استفاده از Box Sizing
ویژگی باکس سایزینگ یا Box Sizing در CSS میاد و اندازه عرض و ارتفاع یک عنصر رو با اندازه ویژگی های و Padding و Border تفکیک میکنه، یعنی از هم جداشون میکنه و نمیزاره اندازه های ویژگی های Padding و Border روی اندازه اصلی عرض و ارتفاع یک عنصر تاثیر بزاره.
پیشنهاد میکنم حتما آموزش ویژگی box-sizing را در CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از box-sizing بصورت مجزا در یک تگ
یعنی داریم میگیم box-sizing فقط برای فلان تگ اعمال بشه ( تو هرتگی که بخوایم اعمال شه باید داخلش از این ویژگی استفاده کنیم )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .box-1{ width:200px; height:70px; border:5px solid black; padding:10px; box-sizing: border-box; } .box-2{ width:200px; height:70px; border:5px solid black; padding:15px; box-sizing: border-box; } </style> |
مثال شماره ۲ : اعمال کردن box-sizing بروی تمامی تگ های موجود در صفحه
تو این حالت دیگه box-sizing روی همه ی تگ ها اعمال میشه و دیگه نمیخواد مثه مثال شماره ۱ روی تگ خاصی اعمال کنیم، پیشنهاد میشه شما هم همیشه همینکارو کنید، یعنی همانند مثال زیر بصورت سراسری استفاده کنید.
|
1 2 3 |
*{ box-sizing: border-box; } |
