آموزش CSS مبتدی : مدل جعبه‌ای

هر چیزی در CSS یک کادر دور خود دارد و درک این کادرها کلید ایجاد طرح‌بندی‌های پیچیده‌تر با CSS یا ترازبندی آیتم‌ها با یکدیگر است. در این درس، نگاهی به مدل کادر CSS خواهیم انداخت. شما با نحوه کار آن و اصطلاحات مربوط به آن آشنا خواهید شد.

جعبه‌های بلوکی و درون‌خطی

در CSS چندین نوع کادر داریم که عموماً در دسته‌های کادرهای بلوکی و کادرهای درون‌خطی قرار می‌گیرند. نوع به نحوه رفتار کادر از نظر جریان صفحه و در ارتباط با سایر کادرهای صفحه اشاره دارد. کادرها دارای نوع نمایش داخلی و نوع نمایش خارجی هستند. به طور کلی، می‌توانید با استفاده از ویژگی display، مقادیر مختلفی را برای نوع نمایش تنظیم کنید. اگر یک کادر مقدار نمایش (display: block) داشته باشد، در این صورت: - کادر به یک خط جدید شکسته می‌شود. - ویژگی‌های عرض و ارتفاع رعایت می‌شوند. - padding، margin و border باعث می‌شوند عناصر دیگر از کادر دور شوند. اگر عرض مشخص نشده باشد، کادر در جهت درون‌خطی امتداد می‌یابد تا فضای موجود در محفظه خود را پر کند. در بیشتر موارد، کادر به اندازه محفظه خود پهن می‌شود و ۱۰۰٪ فضای موجود را پر می‌کند.

برخی از عناصر HTML، مانند و ، به طور پیش‌فرض از نوع نمایش بیرونی بلوکی استفاده می‌کنند. اگر یک کادر نوع نمایش درون‌خطی (display: inline) داشته باشد، آنگاه: - کادر به یک خط جدید نمی‌شکند. - عرض، ارتفاع و حاشیه‌های بالا و پایین هیچ تاثیری نخواهند داشت. - فاصله‌گذاری بالا و پایین و حاشیه‌ها، اندازه کادر را بدون تأثیر بر موقعیت محتوای اطراف، که می‌تواند باعث همپوشانی شود، تغییر می‌دهند. فاصله‌گذاری چپ و راست، حاشیه‌ها و حاشیه‌ها، بر موقعیت محتوای درون‌خطی اطراف تأثیر می‌گذارند

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

انواع نمایشگر داخلی و خارجی

مقادیر نمایش بلوکی و درون‌خطی، انواع نمایش بیرونی نامیده می‌شوند - آنها بر نحوه چیدمان جعبه نسبت به سایر جعبه‌های اطراف آن تأثیر می‌گذارند. جعبه‌ها همچنین یک نوع نمایش درونی دارند که نحوه چیدمان عناصر داخل آن جعبه را تعیین می‌کند. شما می‌توانید نوع نمایش درونی را با تنظیم یک مقدار نمایش درونی تغییر دهید، به عنوان مثال . عنصر همچنان از نوع نمایش بیرونی block استفاده می‌کند، اما این نوع نمایش درونی را به flex تغییر می‌دهد. هر فرزند مستقیم این جعبه به آیتم‌های flex تبدیل می‌شود و طبق مشخصات Flexbox رفتار می‌کند. وقتی به سراغ یادگیری جزئیات بیشتر در مورد چیدمان CSS می‌روید، با flex و مقادیر درونی مختلف دیگری که جعبه‌های شما می‌توانند داشته باشند، به عنوان مثال grid، مواجه خواهید شد. در حال حاضر زیاد نگران اصطلاحات درونی و بیرونی نباشید؛ این چیزی است که به صورت درونی اتفاق می‌افتد و ما در اینجا به آن اشاره کردیم تا در صورت برخورد با آن در جای دیگری، در اینجا به آن اشاره کنیم. به طور کلی، شما فقط با مقادیر نمایش تکی سر و کار خواهید داشت و نیازی به فکر کردن زیاد در مورد آن نخواهید داشت.

نمونه‌هایی از انواع مختلف نمایشگر

مثال زیر سه عنصر HTML مختلف دارد که همگی دارای نوع نمایش بیرونی از نوع بلوک هستند. پاراگراف با حاشیه‌ای که در CSS اضافه شده است. مرورگر این را به عنوان یک جعبه بلوک نمایش می‌دهد. پاراگراف از یک خط جدید شروع می‌شود و به صورت افقی امتداد می‌یابد تا کل عرض موجود را پر کند. لیست، که با استفاده از طرح‌بندی شده است. این طرح‌بندی، طرح‌بندی فلکس را برای فرزندان ظرف ایجاد می‌کند، که آیتم‌های فلکس هستند که به طور پیش‌فرض در یک ردیف قرار می‌گیرند. خود لیست یک جعبه بلوک است و - مانند پاراگراف - به عرض کامل ظرف گسترش می‌یابد و به یک خط جدید می‌شکند. یک پاراگراف سطح بلوک، که در داخل آن دو عنصر وجود دارد. این عناصر معمولاً درون‌خطی هستند، با این حال، یکی از عناصر دارای کلاس block است و روی تنظیم می‌شود. در نتیجه، آن کلمه واحد از یک خط جدید شروع می‌شود که کل عرض والد خود را در بر می‌گیرد.

HTML

CSS

در مثال بعدی، می‌توانیم ببینیم که عناصر درون‌خطی چگونه رفتار می‌کنند. - عناصر در پاراگراف اول به طور پیش‌فرض درون‌خطی هستند و بنابراین باعث شکست خط نمی‌شوند. - عنصر که روی تنظیم شده است، یک کادر درون‌خطی حاوی برخی از موارد flex ایجاد می‌کند. - هر دو پاراگراف روی تنظیم شده‌اند. کانتینر flex درون‌خطی و پاراگراف‌ها همگی به جای شکستن به خطوط جدید، در یک خط با هم اجرا می‌شوند (همانطور که اگر به عنوان عناصر سطح بلوک نمایش داده می‌شدند، این اتفاق می‌افتاد). برای تغییر بین حالت‌های نمایش، می‌توانید را به یا را به تغییر دهید:

HTML

CSS

نکته کلیدی که فعلاً باید به خاطر داشته باشید این است: تغییر مقدار ویژگی display می‌تواند نوع نمایش بیرونی یک کادر را که block یا inline باشد، تغییر دهد. این امر نحوه نمایش آن در کنار سایر عناصر در طرح‌بندی را تغییر می‌دهد.

مدل جعبه‌ای CSS چیست؟

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

قطعات یک جعبه

برای ساخت یک کادر بلوکی در CSS، موارد زیر را داریم: - کادر محتوا (content box) : ناحیه‌ای که محتوای شما نمایش داده می‌شود؛ اندازه آن را با استفاده از ویژگی‌هایی مانند عرض و ارتفاع تعیین می‌کنیم. کادر پدینگ (padding box) : پدینگ به عنوان فضای خالی در اطراف محتوا قرار می‌گیرد؛ اندازه آن را با استفاده از پدینگ و ویژگی‌های مرتبط تعیین می‌کند. کادر حاشیه (border box) : کادر حاشیه، محتوا و هر گونه پدینگ را در بر می‌گیرد؛ اندازه آن را با استفاده از حاشیه و ویژگی‌های مرتبط تعیین می‌کند. کادر مارجین (margin box) : حاشیه، بیرونی‌ترین لایه است که محتوا، پدینگ و حاشیه را به عنوان فضای خالی بین این کادر و سایر عناصر در بر می‌گیرد؛ اندازه آن را با استفاده از مارجین و ویژگی‌های مرتبط تعیین می‌کند. نمودار زیر این لایه‌ها را نشان می‌دهد:

مدل جعبه‌ای استاندارد CSS

در مدل استاندارد جعبه، اگر مقادیر ویژگی‌های عرض و ارتفاع را برای یک جعبه تنظیم کنید، این مقادیر عرض و ارتفاع جعبه محتوا را تعریف می‌کنند. سپس هرگونه فاصله‌گذاری و حاشیه به آن ابعاد اضافه می‌شود تا اندازه کل اشغال شده توسط جعبه به دست آید (به تصویر زیر مراجعه کنید). اگر فرض کنیم یک جعبه دارای CSS زیر باشد:

CSS

فضای واقعی اشغال شده توسط جعبه، ۴۱۰ پیکسل عرض (۳۵۰ + ۲۵ + ۲۵ + ۵ + ۵) و ۲۱۰ پیکسل ارتفاع (۱۵۰ + ۲۵ + ۲۵ + ۵ + ۵) خواهد بود.

margin جزو اندازه واقعی کادر محسوب نمی‌شود - البته، بر کل فضایی که کادر در صفحه اشغال می‌کند تأثیر می‌گذارد، اما فقط فضای بیرون کادر را شامل می‌شود. مساحت کادر در حاشیه متوقف می‌شود - به داخل حاشیه گسترش نمی‌یابد.

مدل جعبه‌ای جایگزین CSS

در مدل جعبه‌ای جایگزین، هر عرضی برابر با عرض جعبه قابل مشاهده در صفحه است. عرض ناحیه محتوا برابر با آن عرض منهای عرض فاصله‌گذاری و حاشیه است (تصویر زیر را ببینید). این روش راحت‌تر است زیرا نیازی به جمع کردن حاشیه و فاصله‌گذاری برای بدست آوردن اندازه واقعی جعبه نیست. برای فعال کردن مدل جایگزین برای یک عنصر، را روی آن تنظیم کنید:

CSS

اگر فرض کنیم که کادر همان CSS بالا را دارد:

CSS

فضای واقعی اشغال شده توسط کادر اکنون ۳۵۰ پیکسل در جهت درون‌خطی و ۱۵۰ پیکسل در جهت بلوکی خواهد بود.

برای استفاده از مدل جعبه‌ای جایگزین برای همه عناصر خود (که یک انتخاب رایج در بین توسعه‌دهندگان است)، ویژگی را روی عنصر تنظیم کنید و همه عناصر دیگر را طوری تنظیم کنید که آن مقدار را به ارث ببرند:

CSS

استفاده از ابزارهای توسعه مرورگر برای مشاهده مدل جعبه‌ای

ابزارهای توسعه‌دهنده مرورگر شما می‌توانند درک مدل جعبه‌ای را بسیار آسان‌تر کنند - آن‌ها می‌توانند اندازه عنصر به علاوه حاشیه، فاصله‌گذاری و حاشیه آن را به شما نشان دهند. بررسی یک عنصر به این روش، راهی عالی برای فهمیدن این است که آیا جعبه شما واقعاً همان اندازه‌ای است که فکر می‌کنید!

مارجین‌ها، فاصله‌گذاری و حاشیه‌ها

شما قبلاً در مثال بالا نحوه‌ی کار ویژگی‌های را دیده‌اید. ویژگی‌های استفاده شده در آن مثال، shorthands هستند و به ما امکان می‌دهند هر چهار طرف کادر را به طور همزمان تنظیم کنیم. این shorthands همچنین دارای ویژگی‌های longhand معادل هستند که امکان کنترل روی طرف‌های مختلف کادر را به صورت جداگانه فراهم می‌کنند. بیایید این ویژگی‌ها را با جزئیات بیشتری بررسی کنیم.

مارجین margin

حاشیه یک فضای نامرئی در اطراف کادر شماست. این فضا، عناصر دیگر را از کادر دور می‌کند. حاشیه‌ها می‌توانند مقادیر مثبت یا منفی داشته باشند. تنظیم حاشیه منفی در یک طرف کادر می‌تواند باعث شود که با سایر موارد روی صفحه همپوشانی داشته باشد. چه از مدل کادر استاندارد استفاده کنید و چه از مدل کادر جایگزین، حاشیه همیشه پس از محاسبه اندازه کادر قابل مشاهده اضافه می‌شود. ما می‌توانیم تمام حاشیه‌های یک عنصر را به طور همزمان با استفاده از ویژگی margin یا هر طرف را به صورت جداگانه با استفاده از ویژگی‌های معادل longhand کنترل کنیم:

HTML

CSS

فروپاشی مارجین

بسته به اینکه دو عنصری که مارجین‌هایشان به هم می‌رسد، مارجین‌های مثبت یا منفی داشته باشند، نتایج متفاوت خواهد بود: - دو مارجین مثبت با هم ترکیب می‌شوند و یک مارجین تشکیل می‌دهند. اندازه آن برابر با بزرگترین مارجین منفرد خواهد بود. - دو مارجین منفی جمع می‌شوند و کوچکترین مقدار (دورترین مقدار از صفر) استفاده می‌شود. - اگر یک مارجین منفی باشد، مقدار آن از مجموع کم می‌شود. در مثال زیر، دو پاراگراف داریم. پاراگراف بالایی مارجینی به اندازه ۵۰ پیکسل و پاراگراف دیگر مارجینی به اندازه ۳۰ پیکسل دارد. مارجین‌ها به هم جمع شده‌اند، بنابراین مارجین واقعی بین کادرها ۵۰ پیکسل است و نه مجموع دو مارجین. می‌توانید این را با تنظیم مارجین بالای پاراگراف دوم به ۰ آزمایش کنید. مارجین قابل مشاهده بین دو پاراگراف تغییر نخواهد کرد - ۵۰ پیکسل تعیین شده در مارجین پایین پاراگراف اول را حفظ می‌کند. اگر آن را روی -۱۰ پیکسل تنظیم کنید، خواهید دید که مارجین کلی ۴۰ پیکسل می‌شود - از ۵۰ پیکسل کم می‌شود.

HTML

CSS

مرزها (حاشیه ها) border

حاشیه بین حاشیه و فاصله‌ی بین دو کادر رسم می‌شود. اگر از مدل کادر استاندارد استفاده می‌کنید، اندازه‌ی حاشیه به عرض و ارتفاع کادر محتوا اضافه می‌شود. اگر از مدل کادر جایگزین استفاده می‌کنید، هر چه حاشیه بزرگتر باشد، کادر محتوا کوچکتر است، زیرا حاشیه مقداری از عرض و ارتفاع موجود کادر عنصر را اشغال می‌کند. برای استایل‌بندی حاشیه‌ها، تعداد زیادی ویژگی وجود دارد - چهار حاشیه وجود دارد و هر حاشیه دارای سبک، عرض و رنگی است که ممکن است بخواهیم آن را دستکاری کنیم. می‌توانید عرض، سبک یا رنگ هر چهار حاشیه را به طور همزمان با استفاده از ویژگی border تنظیم کنید. برای تنظیم ویژگی‌های هر طرف به صورت جداگانه، از موارد زیر استفاده کنید:

HTML

CSS

پدینگ padding

فاصله‌گذاری padding بین حاشیه و ناحیه محتوا قرار می‌گیرد و برای دور کردن محتوا از حاشیه استفاده می‌شود. برخلاف حاشیه‌ها، نمی‌توانید فاصله‌گذاری منفی داشته باشید. هر پس‌زمینه‌ای که به عنصر شما اعمال شود، پشت فاصله‌گذاری نمایش داده می‌شود. ویژگی padding، فاصله‌گذاری را در تمام جهات یک عنصر کنترل می‌کند. برای کنترل هر طرف به صورت جداگانه، از این ویژگی‌های longhand استفاده کنید:

HTML

CSS

مدل جعبه‌ای و جعبه‌های درون‌خطی

تمام موارد فوق به طور کامل در مورد کادرهای بلوکی صدق می‌کند. برخی از این ویژگی‌ها می‌توانند در مورد کادرهای درون‌خطی نیز اعمال شوند، مانند مواردی که توسط عنصر ایجاد می‌شوند. در مثال زیر، ما یک درون یک پاراگراف داریم. ما عرض، ارتفاع، حاشیه، مرز و padding را به آن اعمال کرده‌ایم. می‌توانید ببینید که عرض، ارتفاع و حاشیه‌های بالا و پایین بر تأثیری ندارند. padding و حاشیه‌های بالا و پایین اندازه کادر درون‌خطی را تغییر می‌دهند اما بر موقعیت محتوای اطراف آن تأثیری ندارند. در عوض، padding و حاشیه‌های بالا و پایین با کلمات دیگر در پاراگراف همپوشانی دارند. فقط padding، حاشیه‌ها و مرزهای چپ و راست بر موقعیت متن اطراف تأثیر می‌گذارند.

HTML

CSS

استفاده از نمایش: inline-block

یک مقدار ویژه برای display است که حد وسط بین inline و block را فراهم می‌کند. اگر نمی‌خواهید یک آیتم به خط جدید شکسته شود، اما می‌خواهید عرض و ارتفاع را رعایت کند و از همپوشانی که در بالا دیده شد جلوگیری کند، از آن استفاده کنید. یک عنصر با زیرمجموعه‌ای از موارد بلوکی را که از قبل می‌دانیم، انجام می‌دهد: ویژگی‌های عرض و ارتفاع رعایت می‌شوند. padding، margin و border باعث می‌شوند عناصر دیگر از کادر دور شوند. با این حال، به خط جدید نمی‌شکند و فقط در صورتی که صریحاً ویژگی‌های عرض و ارتفاع را اضافه کنید، از محتوای خود بزرگتر می‌شود.

HTML

CSS

این مورد زمانی می‌تواند مفید باشد که بخواهید با اضافه کردن padding به یک لینک، ناحیه‌ی ضربه‌ی بزرگ‌تری بدهید. یک عنصر درون‌خطی مانند است؛ می‌توانید از برای تنظیم padding روی آن استفاده کنید و کلیک روی لینک را برای کاربر آسان‌تر کنید. این مورد را اغلب در نوارهای ناوبری مشاهده می‌کنید. ناوبری زیر با استفاده از flexbox در یک ردیف نمایش داده می‌شود و ما padding را به عنصر اضافه کرده‌ایم زیرا می‌خواهیم بتوانیم رنگ پس‌زمینه را هنگام قرار گرفتن موس روی تغییر دهیم. به نظر می‌رسد که padding روی مرز عنصر همپوشانی دارد. این به این دلیل است که یک عنصر درون‌خطی است. را به قانون با یک انتخابگر اضافه کنید و خواهید دید که چگونه این مشکل را با رعایت padding توسط سایر عناصر حل می‌کند:

HTML

CSS