مدل جعبه‌ای CSS یکی از
بنیادی‌ترین بخش‌های CSS هست
و بنابراین واقعاً لازمه که اون رو بفهمید
تا بتونید CSS رو یاد بگیرید
و این دقیقاً همون چیزیه
که توی این ویدیو انجام می‌دیم
خب مدل جعبه‌ای دقیقاً چیه؟
مدل جعبه‌ای مشخص می‌کنه
که عناصر چطور در یک صفحه وب نمایش داده بشن
و چطور اندازه‌گذاری بشن
پس توی این مدل جعبه‌ای
هر عنصر در یک صفحه وب
به شکل یک جعبه مستطیلی در نظر گرفته می‌شه
و هرکدوم از این جعبه‌ها می‌تونن محتوا داشته باشن
یه حاشیه (border) داشته باشن و فضای داخلی و خارجی هم داشته باشن
پس بیایم همه بخش‌های مدل جعبه‌ای رو
یکی یکی تعریف کنیم
و با محتوا شروع می‌کنیم
این همون محتوای واقعی عنصره
پس می‌تونه متن یا تصویر باشه
یا یه جدول یه ویدیو
یا واقعاً هر محتوای دیگه‌ای
که ما مشخص می‌کنیم
با استفاده از ویژگی‌های CSS می‌تونیم
ارتفاع و عرض رو
برای ناحیه محتوا مشخص کنیم
که این کار رو توی
یکی از درس‌های بعدی انجام می‌دیم
بعدش می‌تونیم یه حاشیه (border) تعریف کنیم
که دور تا دور عنصر قرار بگیره
در واقع ما این کار رو قبلاً هم انجام دادیم یادتونه؟
و همین‌طور
این حاشیه از نظر فنی
هنوز داخل عنصر محسوب می‌شه
و حالا بخش بعدی
از مدل جعبه‌ای پَدینگ (padding) هست
پَدینگ در واقع فضای خالی نامرئیه
که می‌تونیم اطراف محتوای عنصر ایجاد کنیم
پس بین محتوا و حاشیه قرار می‌گیره
می‌تونید اینو به‌خوبی توی این دیاگرام ببینید
و وقتی در عمل ازش استفاده کنیم
حتی بیشتر هم براتون جا می‌افته
اما در هر صورت مثل حاشیه
پَدینگ هم
هنوز داخل عنصر قرار داره
پس در اصل پَدینگ فضای خالیه
که ما می‌تونیم داخل عناصر ایجاد کنیم
بعد مشابه پَدینگ
ما مارجین (margin) هم داریم
تفاوتش اینه که مارجین
فضای خالی اطراف عنصر ایجاد می‌کنه
یعنی بیرون از خود عنصر
پس در عمل ما از مارجین استفاده می‌کنیم
تا فضای خالی ایجاد کنیم
بین عناصر صفحه‌مون
برای مثال
اگر بخوایم بین دو عنصر خاص فاصله بندازیم
کافیه ویژگی مارجین رو
روی یکی از اون‌ها مشخص کنیم
پس دوباره پَدینگ فضای خالیه
که می‌تونیم داخل هر عنصر اضافه کنیم
و این قرار می‌گیره بین
خود محتوا و حاشیه
که در اصل بیرونی‌ترین بخش عنصره
پس محتوا پَدینگ و حاشیه در کنار هم
بخش قابل مشاهده عنصر رو تشکیل می‌دن
همون‌طور که توی صفحه می‌بینیم
بعد دور همه اون‌ها
می‌تونیم مارجین اضافه کنیم
برای ایجاد فاصله بین عناصر
حالا چیزی که اینجا مهمه
اینه که همه این‌ها در واقع اختیاری هستن
پس لازم نیست حتماً پَدینگ
یا حاشیه یا مارجین تعریف کنیم
می‌تونیم هیچکدوم رو تعریف نکنیم یا بعضی‌ها رو
یا حتی همه‌شون رو
همه‌چیز بستگی به این داره
که می‌خوایم چیدمون چه شکلی باشه
در نهایت یه چیزی هم هست
به اسم ناحیه پُر (fill area)
و این یکی ممکنه یه مقدار گیج‌کننده باشه
اما بیایم سعی کنیم بفهمیمش
پس یادتون باشه که محتوای متنی
و تصاویر داخل جعبه محتوا (content box) هستن درسته؟
خب این موضوع برای تصاویر پس‌زمینه
یا رنگ پس‌زمینه عنصر صدق نمی‌کنه
این ویژگی‌ها در واقع اعمال می‌شن
نه فقط روی ناحیه محتوا
بلکه روی کل ناحیه پُر
که شامل پَدینگ و حاشیه هم می‌شه
پس در اصل اگه ما
یه تصویر پس‌زمینه یا رنگ اعمال کنیم
کل بخش قابل مشاهده عنصر رو می‌گیره
حالا برای بعضی‌ها
این ممکنه خیلی انتزاعی به نظر برسه
و سخت باشه تصورش توی دنیای واقعی
پس توی این موقعیت‌ها
خیلی مفیده که به یه تشبیه فکر کنیم
توی دنیای واقعی
و یکی از اون تشبیه‌ها که
من شخصاً اینو خیلی مفید می‌دونم
که یک قاب روی دیوار رو تصور کنیم
پس توی این قیاس
نقاشی یا تصویری که داخل قاب هست
در واقع ناحیه‌ی محتواست
بعدش خیلی از قاب‌ها در واقع اینو دارن
یه جور کاغذ سفید
بین نقاشی یا تصویر
و خود قاب اصلی
خب حالا اگه اینو برگردونیم
به مدل جعبه‌ای
اون بخش قطعاً میشه پدینگ
پس فضایی که بین
ناحیه‌ی محتوا و بوردر قرار می‌گیره
و توی این قیاس
قاب در واقع بوردر هست درسته؟
پس این خیلی منطقی به نظر میاد
در نهایت وقتی یه عکس رو روی دیوار می‌زنیم
با استفاده از چنین قابی
خب ممکنه یه فضایی باشه
بین بقیه المان‌ها روی دیوار
یا حتی بین دیوارهای دیگه در کناره‌ها
و توی قیاس مدل جعبه‌ای ما
اون قطعاً میشه مارجین
پس اون فضاییه که بیرون قاب قرار می‌گیره
و بین قاب‌ها فاصله ایجاد می‌کنه
مثلاً ممکنه
یه قاب دیگه یه جای دیگه روی دیوار باشه
و فضای بین اون قاب‌ها
یعنی بیرونشون
همون چیزیه که توی مدل جعبه‌ای بهش می‌گیم مارجین
خب؟
امیدوارم این قیاس از دنیای واقعی
کمکت کنه این مفاهیم رو
به دنیای انتزاعی‌تر CSS برگردونی
و حالا فقط برای جمع‌بندی
بیایم سریع یاد بگیریم مدل جعبه‌ای
چطور دقیقاً سایز یک المان رو محاسبه می‌کنه
بر اساس محتوا بوردر و پدینگ
خب همونطور که گفتم
ما می‌تونیم ارتفاع
و عرض ناحیه‌ی محتوا رو مشخص کنیم
حالا اگه ما تصمیم بگیریم
ارتفاع یا عرض رو تعریف نکنیم
اون وقت مدل جعبه‌ای خودش اونا رو استنباط می‌کنه
بر اساس محتوا
اما این ارتفاع‌ها و عرض‌هایی که مشخص یا استنباط شدن
در واقع اندازه نهایی المان نیستن
چون بوردر و پدینگ هم
به حساب میان
پس عرض نهایی یک المان
اونطور که توی چیدمان نهایی می‌بینیم
با بوردر چپ
به اضافه پدینگ چپ
به اضافه عرض مشخص‌شده یا استنباط‌شده
به اضافه پدینگ راست و بوردر راست تعریف می‌شه
و همین منطق البته برای ارتفاع هم
صدق می‌کنه
یعنی بوردر بالا به اضافه پدینگ بالا
به اضافه ارتفاع مشخص‌شده یا استنباط‌شده
به اضافه پدینگ پایین
و در نهایت بوردر پایین
خب همونطور که می‌بینید
مارجین قطعاً
بخشی از محاسبات عرض
یا ارتفاع المان‌ها نیست
چون همونطور که گفتم فقط یه فضاییه
که اطرافشون قرار می‌گیره
و همونطور که اول جلسه گفتم
ما می‌تونیم البته
همه این اندازه‌های جداگانه رو
با استفاده از ویژگی‌های CSS مشخص کنیم
حالا چیزی که خیلی مهمه اینجاست
اینه که این روش
محاسبه ارتفاع‌ها و عرض‌ها
در واقع فقط رفتار پیش‌فرض
مدل جعبه‌ایه
با این حال ما می‌تونیم این رفتار پیش‌فرض رو تغییر بدیم
چون در واقع خیلی منطقی نیست
و این کارو بعداً انجام می‌دیم
اما فعلاً نمی‌خوام بیشتر گیجت کنم
پس بیایم با همین رفتار پیش‌فرض از ویدیوی
بعدی شروع کنیم