این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کامل کار با Box Sizing در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل کار با Box Sizing در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
Box Sizing در CSS3
ویژگی باکس سایزینگ یا Box Sizing در CSS میاد و اندازه عرض و ارتفاع یک عنصر رو با اندازه ویژگی های و Padding و Border تفکیک میکنه، یعنی از هم جداشون میکنه و نمیزاره اندازه های ویژگی های Padding و Border روی اندازه اصلی عرض و ارتفاع یک عنصر تاثیر بزاره.
میگن تمامی تگ ها در یک صفحه وب حالت باکس مدل یا Box Model دارند، یا میتونیم بگیم حالت یک جعبه دارند که این جعبه یا باکس دارای چندین ویژگی به شرح زیر می باشد :
- اندازه عرض یا Width
- اندازه ارتفاع یا Height
- اندازه پدینگ یا Padding
- اندازه بوردر یا خط دور لبه یا Border
- اندازه مارجین یا Margin
تصویر زیر مدل باکس بودن یک عنصر رو در یک صفحه وب نشان میدهد :
این یعنی یک باکس داخل خودش متن / محتوا داره، بعدش میتونه Padding داشته باشه و بعدش دوباره میتونه Border و در نهایت هم میتونه Margin داشته باشه، و همه ی اینها میتونن روی اندازه یک تگ تاثیر بزارن.
پس ما متوجه شدیم که هر تگ میتونه دارای ویژگی های 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 مشاهده نمایید.
مثال شماره ۱ : استفاده از 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 بروی تمامی تگ های موجود در صفحه، این بهترین کاره ( استفاده از انتخابگر * )
|
1 2 3 |
*{ box-sizing: border-box; } |
