مدرس: خب حالا که اصول اولیه مدل جعبه (Box Model) رو یاد گرفتی
بریم یه قدم جلوتر و درباره انواع مختلف جعبه‌ها صحبت کنیم
که در مدل جعبه وجود دارن
که توی مدل جعبه تعریف شدن
شاید قبلاً متوجه شده باشی
که در CSS انواع مختلفی از جعبه‌ها وجود داره
پس بیایم این المنت رو اینجا بررسی کنیم تا نشونت بدم منظورم چیه
مثلاً این یکی و می‌بینی که این المنت H2
تمام فضایی که می‌تونه رو اشغال می‌کنه
یعنی عملاً کل عرض
از سمت چپ تا سمت راست رو پر می‌کنه درسته؟
و همین موضوع مثلاً برای کل هدر هم صدق می‌کنه
و البته برای کل مقاله (article) و هدر هم همینطور
و واقعاً بیشتر المنت‌ها به این صورت هستن
ولی یه سری المنت‌های دیگه هم وجود دارن
یعنی یه سری جعبه‌های دیگه مثل این یکی
اینجا ما یه المنت strong داریم
اما می‌بینی که دقیقاً همون فضایی رو می‌گیره
که محتوای داخلش اشغال کرده
و همین موضوع مثلاً برای این تصویر (image) هم صدق می‌کنه
می‌بینی که این فقط ۵۰ در ۵۰ پیکسل فضا می‌گیره
که دقیقاً همون اندازه محتوای خودش هست
و همینطور مثلاً اینجا
با این تگ a (لینک) هم همین اتفاق میفته
که می‌بینی دقیقاً همون عرضی رو می‌گیره که لازمه
برای محتوای خودش
پس این نوع جعبه‌ها که دقیقاً
همون فضایی رو اشغال می‌کنن که محتوای داخلشون نیاز داره
بهشون می‌گیم جعبه‌های inline
و در مقابل همه‌ی اون جعبه‌های دیگه
مثل این پاراگراف یا این تیتر H3
بهشون می‌گیم جعبه‌های سطح بلوک (block-level) یا المنت‌های بلوکی
پس المنت‌ها یا جعبه‌های block-level
کل فضایی که می‌تونن رو اشغال می‌کنن
و عملاً بعد از خودشون یه خط جدید ایجاد می‌کنن
یا به عبارت دیگه
نمی‌تونن کنار همدیگه قرار بگیرن درسته؟
چون وقتی کل عرض افقی رو می‌گیرن
دیگه امکان نداره کنار هم باشن
پس طبیعیه که اینطوری باشه درسته؟
خب این منطقیه
پس اینا تفاوت‌های اصلی هستن
بین جعبه‌های block-level و inline
ولی تفاوت‌های بیشتری هم هست
پس بیایم یه مقایسه داشته باشیم
اینجا من همه المنت‌های block-level رو هایلایت کردم
یا همون جعبه‌های block-level که الان روی صفحه هستن
و همونطور که گفتم
این المنت‌ها عملاً به شکل بلوک فرمت می‌شن
یعنی بلوک‌های بزرگی از محتوا که ۱۰۰٪ عرض
المنت والد خودشون رو اشغال می‌کنن
و این حتی وقتی هم صدق می‌کنه
که محتوای داخلشون اونقدر فضا نیاز نداره
مثلاً این تیتر «What is HTML»
واقعاً به کل خط نیاز نداره درسته؟
اما همچنان یه المنت block-level حساب می‌شه چون
به صورت پیش‌فرض یکی بعد از دیگری عمودی چیده می‌شن
حالا یه نکته خیلی مهم اینه که
مدل جعبه دقیقاً همونطور که قبلاً نشون دادم
روی المنت‌های block-level اعمال می‌شه
در حالی که برای المنت‌های inline اینطور نیست
که الان در ادامه خواهیم دید
به طور پیش‌فرض بیشتر المنت‌های HTML
در واقع block-level هستن
مثل body main header و همینطور بقیه
یعنی بیشتر المنت‌هایی که ما استفاده می‌کنیم
block-level هستن
پس می‌تونیم بگیم که اینا جعبه‌های block-level ایجاد می‌کنن
خب؟
حالا یه کاری که می‌تونیم با CSS انجام بدیم اینه که
تغییر بدیم inline boxها رو به block-level box
و این کار رو با خاصیت display و مقدار block انجام می‌دیم
ولی اینو توی عمل چند لحظه دیگه می‌بینیم
اما فعلاً چیزی که می‌خوام انجام بدیم اینه که
به یه المنت inline نگاه کنیم
و ببینیم چه تفاوتی با المنت‌های block-level داره
اینجا من یه المنت inline رو با یه کادر قرمز مشخص کردم
و می‌بینی که دقیقاً همونطور که انتظار می‌ره
فقط همون فضایی رو می‌گیره که محتوای داخلش نیاز داره
همچنین هیچ خط جدیدی ایجاد نمی‌کنه
نه قبلش نه بعدش
بنابراین می‌تونه خیلی راحت داخل
المنت والد خودش بمونه
بدون اینکه فضای اضافی بسازه
و این دقیقاً برای المنت‌های کوچیک منطقیه
مثل المنت strong المنت em
یا المنت‌های a (لینک‌ها) درسته؟
ما نمی‌خوایم این المنت‌ها یه خط جدید بسازن
و کل عرض صفحه رو بگیرن
چون این هیچ منطقی نداره و به همین دلیله که
ما این انواع مختلف جعبه‌ها رو داریم
به هر حال حالا درباره مدل جعبه همونطور که گفتم
روی المنت‌های inline متفاوت عمل می‌کنه
برای المنت‌های inline ویژگی height و width
هیچ تاثیری ندارن
همچنین padding و margin فقط به صورت افقی اعمال می‌شن
یعنی فقط سمت چپ و راست
ولی نه بالا و پایین
و این تفاوت اساسی
درباره نحوه عملکرد مدل جعبه روی المنت‌های inline هست
این فوق‌العاده مهمه که همیشه به یاد داشته باشید
و هرگز فراموش نکنید چون این اشتباهی هست
که من می‌بینم مبتدی‌ها همیشه مرتکب می‌شن
که در اصل دلیلش اینه که نمی‌فهمن چرا بعضی ویژگی‌ها
از مدل جعبه اونطور که انتظار دارن کار نمی‌کنه
وقتی روی المنت‌های inline اعمال می‌شه
پس اینو به خاطر بسپارید
چون خیلی مهمه که همیشه یادتون باشه
حالا به طور پیش‌فرض بعضی از المنت‌ها
که inline هستن و جعبه‌های inline می‌سازن
شامل تگ‌های a image strong em دکمه‌ها و خیلی‌های دیگه می‌شن
و خیلی‌های دیگه
حالا درست مثل اینکه می‌تونیم از ویژگی display استفاده کنیم
تا هر المنتی رو به یک المنت block-level تبدیل کنیم
می‌تونیم display رو هم روی inline قرار بدیم
تا هر المنت block-level رو به inline تبدیل کنیم
برای اینکه هر المنت بلاکی رو به inline تبدیل کنیم
و حالا بیاید برگردیم به کدمون
تا بعضی از این چیزها رو در عمل ببینیم
بیاید شروع کنیم با استایل دادن به این لینک‌ها
که توی هدر هستن
پس بیاید انتخابشون کنیم اما پایین‌تر این کار رو می‌کنم
پس بذارید یه چندتا کامنت اینجا بسازم
پس فرض کنید اینا مثل بخش‌های صفحه هستن
یا چیزی شبیه به اون
پس در واقع همه بخش‌های بزرگ تقسیم‌کننده صفحه‌مون
پس ما body داریم container
هدر اصلی navigation article و همه این‌ها
و بعد اینجا جاییه که شروع می‌کنیم
به کار روی المنت‌های کوچیک‌تر
و این عنوان‌ها خیلی مهم نیستن
من فقط می‌خوام یه جداسازی بصری داشته باشم
توی کد
خب پس بیاید بریم پایین تا آخر
شاید همینجا
و من می‌خوام همه لینک‌هایی رو انتخاب کنم
که داخل navigation هستن
پس بذارید بگیم navigation و بعد لینک‌های داخلش
و مثل همیشه باید از pseudo-class لینک استفاده کنم
برای استایل دادن بهشون
حالا برای اینکه بهتر ببینیم چه اتفاقی میفته
بهشون یه رنگ یه رنگ پس‌زمینه مثل نارنجی-قرمز بدیم
و حالا لازمه دستی صفحه رو ریفرش کنم
خب حالا اون رنگ پس‌زمینه رو داریم
و بیاید شروع کنیم با اضافه کردن یه margin اینجا
فقط برای اینکه ببینیم مدل جعبه
در واقع اونطور که فکر می‌کردیم اعمال نمی‌شه
پس بذارید 20 پیکسل بذاریم و ذخیره کنیم
و می‌بینید که یه margin به صورت افقی اضافه شد
یعنی در سمت چپ و راست درسته؟
اما چیزی که اتفاق نیفتاد این بود که فضای عمودی ایجاد بشه
پس margin بالا و پایین بدون تغییر موند
حالا اگه اینو اینجا بررسی کنیم
توی مدل جعبه در dev tools
هنوز پایین این نشون داده میشه
یه فضای بیشتر اینجاست
می‌بینید که مقدار 20 هنوز نشون داده میشه
اما توی این لایه رنگی
اینجا این نارنجی در واقع هیچ فضایی ایجاد نکرد
حتی با اینکه اینجا نوشته 20 درسته؟
و همونطور که الان می‌دونید دلیلش اینه که
تگ a یک المنت inline هست
که مدل جعبه توش فضای عمودی ایجاد نمی‌کنه
و همین موضوع برای padding هم صدق می‌کنه
پس padding بیست پیکسل
خب ببینیم
و حالا در واقع به نظر میاد که یه فضایی ایجاد شده
اما این فقط برای داخل المنت صدق می‌کنه
چون در واقع محتوای لینک یا همون anchor هنوز سر جاشه
ولی اگه این یک المنت بلاکی بود
اونوقت همه اینا یه کم پایین‌تر می‌رفت
پس در اصل فضای پرشده این المنت گسترش پیدا کرده
و با رنگ پس‌زمینه پر شده
اما هیچ فضای جدیدی در واقع ایجاد نشده
ولی هیچ فضای جدیدی واقعا ساخته نشده
خب اما اگه واقعا بخوایم اون فضا رو داشته باشیم
و بخوایم المنت‌ها یکی بعد از دیگری باشن
اونوقت البته می‌تونیم اونا رو به المنت بلاکی تبدیل کنیم
و این دقیقاً همون چیزیه که توی اسلاید نشون دادم
با استفاده از ویژگی display
و تنظیمش روی مقدار block
و این باعث میشه المنت inline
به صورت block-level رندر بشه
خب فکر می‌کنید وقتی اینو ذخیره کنم چه اتفاقی میفته؟
و اینم نتیجه
حالا همه این المنت‌ها کل عرضی که می‌تونن رو اشغال کردن
و همچنین حالا واقعا margin عمودی هم دارن
بین خودشون
حالا اونا یه جورایی بیرون از المنت header شدن
چون ما برای المنت header یه ارتفاع ثابت تعیین کردیم
توی یکی از درس‌های قبلی
پس بذارید اینو با overlay نشونتون بدم
به یه فضای بیشتر نیاز داریم
و چون ما ارتفاع هدر رو
روی یه مقدار مشخص یعنی 80 پیکسل تنظیم کردیم
دیگه محتوا توش جا نمی‌شه
و بنابراین المنت گسترش پیدا نکرد
تا محتوا رو جا بده
و به همین دلیله که معمولاً
ما برای المنت‌ها ارتفاع ثابت تعیین نمی‌کنیم
بذارید برگردم و اون رو تغییر بدم
خب اون فقط یک دمو بود در هر صورت پس آره
اینجا ارتفاعی هست که روی 80 تنظیمش کردیم
بذارید اون رو کامنت کنم دوباره ذخیره کنم
و حالا المنت به صورت عمودی گسترش پیدا کرد
تا فضای اضافی لازم رو در بر بگیره
خب امیدوارم که این منطقی باشه
اما نکته اصلی اینه که این المنت‌های لینک اینجا
الان همه شرایط لازم رو دارن
برای اینکه یک المنت سطح بلاک باشن
پس مدل جعبه به طور عادی روی اون‌ها اعمال میشه
و اون‌ها صد در صد عرض موجود رو اشغال می‌کنن
و بنابراین پشت سر هم ظاهر میشن
به‌صورت مرتب مثل بلاک‌ها
درسته؟
پس اون‌ها تمام فضا رو همون‌طور که می‌بینیم اشغال می‌کنن
که البته شامل مارجین هم میشه
پس هر کدوم از این‌ها اگه نگاه کنیم یه مارجین دارن درسته؟
این همون رنگ نارنجی اینجاست
و این بخشی از کل فضاییه
که خود المنت نیاز داره
خب بیایید برگردیم پایین اینجا
و در واقع همه این‌ها رو خاموش کنیم
چون این واقعا فقط یک دمو بود باشه؟
و حالا طبیعتا می‌بینیم که هدر جمع میشه
و فقط به اندازه فضایی که لازم داره عمودی اشغال می‌کنه
خب همونطور که هی المنت‌های بیشتری اضافه می‌کنیم
این باید رشد کنه که دقیقا همون اتفاقیه که افتاد
وقتی این لینک‌ها بزرگ‌تر بودن
اما حالا دوباره کوچک شدن
و بنابراین اون فضای اضافه‌ای که داشتیم دیگه لازم نیست
و حالا بعدش بیایید سریع عکس اون رو امتحان کنیم
و بعضی از المنت‌های بلاک رو به المنت‌های inline تغییر بدیم
مثلا بیایید امتحان کنیم ببینیم چی میشه
وقتی که المنت‌های لیست رو inline کنیم.
Display inline
بیایید اینو حذف کنیم در واقع
و حالا می‌بینید که این سه المنت
حالا عملا کنار هم قرار گرفتن
و فقط فضایی رو که نیاز دارن اشغال می‌کنن
و در واقع بیایید دوباره اون رو برگردونیم چون
همونطور که گفتم ابزارهای توسعه واقعا خیلی مهم هستن
به‌خصوص برای نشون دادن این جعبه‌ها درسته؟
پس حالا این جعبه‌ها اینجوری کنار هم قرار گرفتن
چون inline هستن
پس دیگه بعدشون شکست خط ایجاد نمی‌کنن
و فقط فضایی رو که نیاز دارن اشغال می‌کنن
بیایید همین کار رو اینجا خاموش کنیم
و روی پاراگراف‌ها امتحان کنیم
و خب این حتی عجیب‌تر به نظر میاد
چون کل متن عملا جمع شد
و مثل یه خط بزرگ از متن دیده میشه درسته؟
پس دوباره هر کدوم از این المنت‌ها
حالا فقط فضایی رو که نیاز دارن اشغال می‌کنن
درسته؟
اما بیایید این رو حذف کنیم
چون توی این موقعیت خیلی منطقی نیست
ولی توی بعضی موقعیت‌ها واقعا خیلی منطقیه
حالا توی خیلی از موقعیت‌ها چیزی که حتی منطقی‌تره
اینه که یک المنت سطح بلاک رو تبدیل کنیم
به چیزی به نام المنت inline-block
پس در واقع این ترکیبی از inline و بلاک هست
بیایید سریع بررسی کنیم که این یعنی چی
خب اینجا یه خلاصه سریع داریم
از هم المنت‌های بلاک و هم inline
خب اون‌ها رو قبلا می‌دونیم
پس لازم نیست دوباره همه رو مرور کنیم
اما در واقع یه نوع سوم جعبه هم هست
که ترکیبی از این دو تاست
و همونطور که قبلا گفتم اون جعبه inline-block هست
پس جعبه‌های inline-block
از بیرون شبیه inline به نظر میان
اما از داخل مثل المنت‌های سطح بلاک رفتار می‌کنن
یعنی چی؟ یعنی جعبه‌های inline-block
فقط فضایی رو که برای محتوا نیاز دارن اشغال می‌کنن
و بنابراین باعث ایجاد شکست خط نمی‌شن
پس این همون چیزیه که منظورم بود وقتی گفتم
جعبه inline-block از بیرون مثل inline رفتار می‌کنه
اما همونطور که گفتم
از داخل مثل جعبه‌های سطح بلاک رفتار می‌کنه
و یعنی چی؟ یعنی مدل جعبه دقیقا همونطور اعمال میشه
که روی جعبه‌های سطح بلاک اعمال میشه
پس ما هنوز می‌تونیم ارتفاع و عرض تنظیم کنیم
و هنوز می‌تونیم از مارجین‌ها و پدینگ‌ها استفاده کنیم
دقیقا مثل جعبه‌های بلاک یا المنت‌های بلاک
پس این‌ها تقریبا یکی هستن
برای همین من مدام جای هم استفاده می‌کنم
پس در اصل جعبه‌های inline-block واقعا بهترین
ویژگی‌های هر دو دنیا یعنی بلاک و inline رو ترکیب می‌کنن
و برای ساختن یه المنت inline-block
کافیه خاصیت display رو تنظیم کنیم
روی inline-block و تمام
و حالا بیایید ببینیم چطور میشه این رو در عمل انجام داد
و در چه موقعیت‌هایی می‌تونه خیلی مفید باشه
پس برگردیم اینجا به لینک‌های هدرمون
یعنی همین ناوبری تا بهتون نشون بدم
کجا یه المنت inline-block می‌تونه خیلی مفید باشه
خب الان اینجا فرمت زیادی وجود نداره
مثلا فاصله‌ای نداره
پس باید اینو درست کنیم ۳01
پس اینجا یه جایی پایین بود دقیقا همین‌جا
پس برگردیم به امتحان کردن اضافه کردن مارجین
بدون اینکه فعلاً چیزی در خاصیت display تغییر بدیم
خب فرض کنیم بخوایم یه margin-right سی پیکسل بدیم
و این باید کار کنه چون یک فضای افقیه
و این روی المنت‌های inline هم جواب می‌ده
ولی حالا اگه بخوام یه margin-top اضافه کنم
مثلاً ده پیکسل هیچ تغییری اتفاق نمی‌افته درسته؟
پس همونطور باقی می‌مونه
و این دقیقاً همون رفتاریه که قبلاً هم دیدیم
در ابتدای کار
اما حالا اگه display رو به inline-block تغییر بدیم
ببین چی میشه
می‌بینی که حالا فضای مورد نظر رو اینجا گرفتیم
و اگه بررسی کنیم
می‌بینیم که اون فضای نارنجی اینجاست
در سمت راست و ده پیکسل هم در بالا
پس مدل جعبه دوباره مثل یه بلوک اعمال شد
اما از بیرون المنت‌ها هنوز کنار هم هستن
و فقط به اندازه‌ای که نیاز دارن جا می‌گیرن
پس مثل المنت‌های inline رفتار می‌کنن
پس این یه تکنیک عالیه در بعضی موقعیت‌ها
حتی با اینکه الان روش‌های مدرن‌تری هم داریم
برای انجام کار مشابه اما در بعضی موارد
این واقعاً دانستنش مفید و خوبه
و یه تکنیک کاربردی برای جعبه‌ابزارته
و فقط یه نکته آخر اینه که باید margin-right
رو از آخرین المنت حذف کنیم
پس اون nav a: Link رو انتخاب کنیم
و حالا یه چیز جدید خواهی دید
این یه pseudo-class هست درسته؟
ولی می‌تونیم بهش یه pseudo-class دیگه هم زنجیر کنیم
چون الان می‌خوایم آخرین فرزند رو انتخاب کنیم درسته؟
مثل این
و بعد margin-right رو
دوباره صفر می‌کنیم
خب از نظر ظاهری چیزی تغییر نکرد
ولی اینجا می‌بینیم که این یکی
دیگه فضای سمت راست رو نداره
و خیلی وقت‌ها این کار مهمه
و به همین دلیل خواستم بهت نشون بدم
که می‌تونیم این دو pseudo-class رو
بدون هیچ مشکلی زنجیر کنیم
عالیه و حالا برای پایان می‌خوام نشونت بدم
که تصاویر در واقع inline-block هستن
درسته؟
من اولش گفتم
که تصاویر المنت‌های inline هستن
اما در واقع مثل المنت‌های inline-block رفتار می‌کنن
و خیلی راحت می‌تونیم اینو نشون بدیم
با اضافه کردن یه margin مثلاً به این تصویر پست
پس اگه اینجا یه margin صد پیکسل بدم
اونوقت اگه inline بود
هیچ فضای عمودی نباید ایجاد می‌کرد
نه اینجا و نه اینجا درسته؟
ولی ببین وقتی سیو می‌کنم چی میشه
می‌بینی که کل این فضای عمودی اینجا
اضافه شد و این اثبات می‌کنه که واقعاً
یه المنت inline-block هست
و همینطور اینم درسته که می‌تونیم عرض
و ارتفاع برای این المنت تنظیم کنیم
پس اگه واقعاً inline خالص بود
این دوتا هم نباید کار می‌کردن درسته؟
پس اینم مهمه بدونی
و بیاید دوباره به حالت عادی برش گردونیم
خب اینم از انواع باکس‌ها در CSS
فقط به عنوان یه خلاصه سریع یا در واقع
به عنوان برداشت اصلی از این درس
بیشتر وقت‌ها ما تنظیم display رو
همونطور رها می‌کنیم
و از نوع جعبه پیش‌فرض استفاده می‌کنیم
چون به طور پیش‌فرض واقعاً منطقی هستن
اما می‌تونیم display رو block کنیم
تا یه المنت inline کوچیک مثلاً
کل یه خط رو بگیره
که بعضی وقت‌ها در دنیای واقعی لازمه
حالا برعکسش
بعضی وقت‌ها نمی‌خوایم یه المنت بلوکی
بقیه المنت‌ها رو به خط بعدی بندازه
یعنی همیشه نمی‌خوایم کل فضای خالی موجود رو
پر کنه
و در اون حالت می‌تونیم اونو به inline تغییر بدیم
یا حتی بهتر به inline-block تغییر بدیم
چون اونوقت هنوز می‌تونیم مدل جعبه رو
مثل همیشه اعمال کنیم
خب چون اینطوری همچنان box model فعال می‌مونه