مدل جعبه

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

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

در CSS ما به طور گسترده دو نوع جعبه داریم - جعبه های بلوک و جعبه های درون خطی. این نوع به نحوه رفتار جعبه از نظر جریان صفحه و در رابطه با سایر جعبه های صفحه اشاره دارد. جعبه ها دارای نوع نمایشگر داخلی و نوع نمایشگر بیرونی هستند.

به طور کلی ، شما می توانید مقادیر مختلفی را برای نوع صفحه نمایش با استفاده از ویژگی Display تنظیم کنید که می تواند مقادیر مختلفی داشته باشد.

نوع نمایشگر بیرونی

اگر یک جعبه دارای نوع نمایشگر بیرونی بلوک است ، پس از آن:

• جعبه روی یک خط جدید شکسته می شود.
• خصوصیات عرض و ارتفاع رعایت می شود.
• بالشتک ، حاشیه و مرز باعث می شود عناصر دیگر از جعبه دور شوند.
• این جعبه در جهت داخلی گسترش می یابد تا فضای موجود در ظرف آن پر شود. در بیشتر موارد ، جعبه به اندازه ظرف آن گسترده خواهد شد و 100 ٪ از فضای موجود را پر می کند.

برخی از عناصر HTML ، مانند و

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

اگر یک جعبه دارای یک نوع صفحه نمایش بیرونی درون خطی است ، پس از آن:

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

نوع صفحه نمایش داخلی

جعبه ها همچنین دارای یک نوع نمایشگر داخلی هستند که نشان می دهد که چگونه عناصر داخل آن جعبه گذاشته می شوند.

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

با تنظیم نمایش: Flex می توانید نوع نمایشگر داخلی را به عنوان مثال تغییر دهید. بشراین عنصر هنوز از بلوک نوع نمایشگر بیرونی استفاده می کند اما این نوع صفحه نمایش داخلی را به Flex تغییر می دهد. هر کودک مستقیم این جعبه به موارد فلکس تبدیل می شود و مطابق با مشخصات Flexbox رفتار می کند.

هنگامی که شما برای یادگیری در مورد طرح CSS با جزئیات بیشتر حرکت می کنید ، با Flex و مقادیر درونی دیگری که جعبه های شما می توانند داشته باشند ، به عنوان مثال Grid روبرو خواهید شد.

توجه: برای مطالعه بیشتر در مورد مقادیر نمایش ، و نحوه کار جعبه ها در طرح بلوک و درون خطی ، به بلوک راهنمای MDN و طرح درون خطی نگاهی بیندازید.

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

مثال زیر دارای سه عنصر مختلف HTML است که همه آنها دارای نوع نمایشگر بیرونی بلوک هستند.

• پاراگراف با مرز اضافه شده در CSS. مرورگر این کار را به عنوان جعبه بلوک ارائه می دهد. پاراگراف از یک خط جدید شروع می شود و کل عرض موجود را گسترش می دهد.
• لیستی که با استفاده از Display: Flex ارائه شده است. این طرح فلکس را برای کودکان ظرف ، که موارد فلکس هستند ، ایجاد می کند. این لیست به خودی خود یک جعبه بلوک است و - مانند پاراگراف - به عرض کامل کانتینر گسترش می یابد و روی یک خط جدید می شکند.
• یک پاراگراف در سطح بلوک ، که در آن دو عنصر وجود دارد. این عناصر به طور معمول به صورت خطی خواهند بود ، با این حال ، یکی از عناصر دارای کلاس "بلوک" است که به نمایش در می آید: بلوک.

در مثال بعدی می توانیم ببینیم که چگونه عناصر درون خطی رفتار می کنند.

• عناصر موجود در پاراگراف اول به طور پیش فرض درون خطی هستند و بنابراین خطوط خط را مجبور نمی کنند.
• در
  • عنصری که بر روی نمایش تنظیم شده است: inline-flex یک جعبه درون خطی ایجاد می کند که حاوی برخی از موارد فلکس است.
  • دو پاراگراف هر دو به نمایش گذاشته شده است: Inline. کانتینر و پاراگرافهای Flex درون خطی همه در یک خط به جای شکستن روی خطوط جدید (همانطور که در صورت نمایش به عنوان عناصر سطح بلوک انجام می دادند) در یک خط اجرا می شوند.

  برای جابجایی بین حالت های نمایش ، می توانید نمایشگر را تغییر دهید: Inline to Display: Block یا Display: Inline-Flex برای نمایش: Flex.

  نکته کلیدی که اکنون باید به خاطر بسپارید این است: تغییر مقدار خاصیت صفحه نمایش می تواند تغییر کند که آیا نوع نمایشگر بیرونی یک جعبه بلوک یا درون خطی است. این شیوه نمایش در کنار سایر عناصر موجود در طرح را تغییر می دهد.

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

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

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

  قسمت های یک جعبه

  ساخت جعبه بلوک در CSS ما این موارد را داریم:

  • جعبه محتوا: منطقه ای که محتوای شما نمایش داده می شود. اندازه آن با استفاده از خواصی مانند اندازه داخل و اندازه بلوک یا عرض و ارتفاع.
  • جعبه بالشتک: بالشتک در اطراف محتوا به عنوان فضای سفید قرار دارد. اندازه آن با استفاده از بالشتک و خصوصیات مرتبط.
  • Border Box: جعبه مرزی محتوا و هر نوع بالشتک را می پیچد. اندازه آن با استفاده از مرز و خصوصیات مرتبط.
  • جعبه حاشیه: حاشیه بیرونی ترین لایه است و محتوا ، بالشتک و مرز را به عنوان فضای سفید بین این جعبه و سایر عناصر می پیچید. اندازه آن با استفاده از حاشیه و خصوصیات مرتبط.

  نمودار زیر این لایه ها را نشان می دهد:

  

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

  در مدل جعبه استاندارد ، اگر به یک جعبه به اندازه داخلی و اندازه بلوک (یا عرض و ارتفاع) می دهید ، این اندازه اندازه و اندازه بلوک (عرض و ارتفاع در زبان های افقی) را تعریف می کند. جعبهسپس هر نوع بالشتک و مرز به آن ابعاد اضافه می شود تا اندازه کل توسط کادر گرفته شود (تصویر زیر را ببینید).

  اگر فرض کنیم که یک جعبه دارای CSS زیر است:

  فضای واقعی گرفته شده توسط جعبه 410px عرض (350 + 25 + 25 + 5 + 5) و 210px ارتفاع (150 + 25 + 25 + 5 + 5) خواهد بود.

  

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

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

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

  برای روشن کردن مدل جایگزین برای یک عنصر ، اندازه جعبه را تنظیم کنید: جعبه مرزی روی آن:

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

  اکنون ، فضای واقعی گرفته شده توسط جعبه در جهت داخلی 350px و 150px در جهت بلوک خواهد بود.

  

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

  برای درک ایده اصلی ، می توانید مقاله CSS Tricks را در مورد اندازه جعبه بخوانید.

  توجه: یک تاریخچه جالب از تاریخ - اینترنت اکسپلورر که به طور پیش فرض به مدل جعبه جایگزین استفاده می شود و مکانیسم در دسترس نیست.

  بازی با مدل های جعبه

  در مثال زیر می توانید دو جعبه را مشاهده کنید. هر دو دارای یک کلاس از . box هستند که به آنها عرض ، ارتفاع ، حاشیه ، مرز و بالشتک می دهد. تنها تفاوت این است که جعبه دوم برای استفاده از مدل جعبه جایگزین تنظیم شده است.

  آیا می توانید اندازه جعبه دوم (با اضافه کردن CSS به کلاس . alteate) را تغییر دهید تا آن را با جعبه اول به عرض و ارتفاع مطابقت دهید؟

  توجه: می توانید در اینجا راه حلی برای این کار پیدا کنید.

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

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

  

  حاشیه ، بالشتک و مرزها

  شما قبلاً حاشیه ، بالشتک و خواص مرزی را در کار در مثال بالا دیده اید. خواص مورد استفاده در آن مثال ، كوچك است و به ما این امکان را می دهد كه هر چهار طرف جعبه را به طور همزمان تنظیم كنیم. این Shorthands همچنین دارای خواص Longhand معادل هستند که امکان کنترل بر روی طرف های مختلف جعبه را به صورت جداگانه فراهم می کند.

  بیایید با جزئیات بیشتری این خصوصیات را بررسی کنیم.

  لبه

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

  ما می توانیم همه حاشیه های یک عنصر را به یکباره با استفاده از خاصیت حاشیه کنترل کنیم ، یا هر طرف به صورت جداگانه با استفاده از خواص معادل Longhand:

  در مثال زیر سعی کنید مقادیر حاشیه را تغییر دهید تا ببینید که چگونه جعبه به دلیل ایجاد حاشیه یا از بین بردن فضای (اگر حاشیه منفی باشد) بین این عنصر و عنصر حاوی قرار می گیرد.

  حاشیه در حال فروپاشی

  بسته به اینکه دو عنصر که حاشیه آنها دارای حاشیه مثبت یا منفی است ، نتایج متفاوت خواهد بود:

  • دو حاشیه مثبت برای تبدیل شدن به یک حاشیه ترکیب می شوند. اندازه آن برابر با بزرگترین حاشیه فردی خواهد بود.
  • از دو حاشیه منفی فرو می ریزد و از کمترین مقدار (دورترین از صفر) استفاده می شود.
  • اگر یک حاشیه منفی باشد ، مقدار آن از کل کم می شود.

  در مثال زیر دو پاراگراف داریم. پاراگراف بالا دارای حاشیه 50 پیکسل و پاراگراف دیگر دارای حاشیه 30 پیکسل است. حاشیه ها با هم جمع شده اند، بنابراین حاشیه واقعی بین جعبه ها 50 پیکسل است و مجموع دو حاشیه نیست.

  شما می توانید این را با تنظیم حاشیه بالای پاراگراف دو روی 0 آزمایش کنید. حاشیه قابل مشاهده بین دو پاراگراف تغییر نمی کند - 50 پیکسل تنظیم شده در حاشیه پایین پاراگراف یک را حفظ می کند. اگر آن را رو ی-10px تنظیم کنید، خواهید دید که حاشیه کلی 40px می شود - از 50px کم می شود.

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

  مرز ها

  مرز بین حاشیه و بالشتک یک جعبه کشیده شده است. اگر از مدل جعبه استاندارد استفاده می کنید، اندازه حاشیه به عرض و ارتفاع جعبه محتوا اضافه می شود. اگر از مدل جعبه جایگزین استفاده می کنید، اندازه حاشیه، جعبه محتوا را کوچکتر می کند زیرا مقداری از عرض و ارتفاع موجود جعبه عنصر را اشغال می کند.

  برای شکل دهی حاشیه ها، تعداد زیادی ویژگی وجود دارد - چهار حاشیه وجود دارد و هر حاشیه دارای یک سبک، عرض و رنگ است که ممکن است بخواهیم آنها را دستکاری کنیم.

  با استفاده از ویژگی border می توانید عرض، سبک یا رنگ هر چهار حاشیه را همزمان تنظیم کنید.

  برای تنظیم خصوصیات هر طرف به صورت جداگانه، از موارد زیر استفاده کنید:

  برای تنظیم عرض، سبک یا رنگ همه طرف ها، از موارد زیر استفاده کنید:

  برای تنظیم عرض، سبک یا رنگ یک ضلع، از یکی از ویژگی های دانه دارتر استفاده کنید:

  در مثال زیر برای ایجاد حاشیه از انواع کوتاه و بلند استفاده کرده ایم. با ویژگی های مختلف بازی کنید تا بررسی کنید که چگونه کار می کنند. صفحات MDN برای ویژگی های حاشیه اطلاعاتی در مورد سبک های مختلف حاشیه در دسترس را به شما می دهد.

  لایه گذاری

  بالشتک بین حاشیه و ناحیه محتوا قرار می گیرد و برای دور کردن محتوا از حاشیه استفاده می شود. بر خلاف حاشیه ها، نمی توانید بالشتک منفی داشته باشید. هر پس زمینه ای که روی عنصر شما اعمال می شود، در پشت بالشتک نمایش داده می شود.

  ویژگی padding padding را در تمام طرف های یک عنصر کنترل می کند. برای کنترل هر طرف به صورت جداگانه، از این ویژگی های دراز استفاده کنید:

  در مثال زیر ، می توانید مقادیر padding در کلاس را تغییر دهید. جعبه. همچنین می توانید بالشتک را در کلاس تغییر دهید . Container برای ایجاد فضایی بین ظرف و جعبه. می توانید بالشتک را روی هر عنصر تغییر دهید تا فضای بین مرز آن و هر آنچه در داخل عنصر است ایجاد کنید.

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

  تمام موارد فوق به طور کامل در مورد جعبه های مسدود کننده صدق می کند. برخی از خصوصیات می توانند در جعبه های درون خطی نیز استفاده کنند ، مانند مواردی که توسط یک عنصر ایجاد شده است.

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

  با استفاده از Display: Inline-Block

  Display: Inline-Block یک مقدار ویژه از نمایشگر است که یک میانه بین داخل و بلوک را فراهم می کند. اگر نمی خواهید یک مورد روی یک خط جدید شکسته شود ، از آن استفاده کنید ، اما می خواهید آن را به عرض و ارتفاع احترام بگذارید و از همپوشانی که در بالا دیده می شود جلوگیری کنید.

  یک عنصر با نمایشگر: Inline-Block زیر مجموعه هایی از بلوک چیزهایی را که قبلاً در مورد آنها می دانیم انجام می دهد:

  • خصوصیات عرض و ارتفاع رعایت می شود.
  • بالشتک ، حاشیه و مرز باعث می شود عناصر دیگر از جعبه دور شوند.

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

  در این مثال بعدی ، ما Display را اضافه کرده ایم: Inline-Block به عنصر خود. سعی کنید این کار را برای نمایش تغییر دهید: خط را به طور کامل از بین ببرید یا از بین ببرید تا تفاوت در مدل های نمایش را مشاهده کنید.

  Display: Inline-Block را با یک لیست انتخاب کننده . links در لیست قرار دهید ، و خواهید دید که چگونه این مسئله را با ایجاد احترام به عناصر دیگر برطرف می کند.

  مهارت های خود را امتحان کنید!

  شما به پایان این مقاله رسیده اید ، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟می توانید آزمایش های دیگری پیدا کنید تا تأیید کنید که این اطلاعات را قبل از حرکت حفظ کرده اید - به تست مهارت های خود مراجعه کنید: مدل جعبه.

  خلاصه

  این بیشتر چیزی است که شما باید در مورد مدل جعبه درک کنید. ممکن است بخواهید در آینده به این درس برگردید اگر تا به حال خود را در مورد چگونگی جعبه های بزرگ در طرح شما اشتباه گرفته اید.

  در مقاله بعدی ، ما نگاهی خواهیم انداخت که چگونه می توان از پیشینه ها و مرزها استفاده کرد تا جعبه های ساده شما جالب تر به نظر برسد.