پادکست CSS - 001: The Box Model
بگویید که این بیت HTML را دارید:
<p>I am a paragraph of text that has a few words in it.</p>
سپس این CSS را برای آن بنویسید:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
محتوا به جای 100 پیکسلی که مشخص کردید 142 پیکسل عرض دارد و از عنصر شما خارج می شود. چرا اینطور است؟
مدل جعبه پایه اصلی CSS است. درک اینکه مدل جعبه چگونه کار می کند، چگونه تحت تاثیر سایر جنبه های CSS قرار می گیرد، و مهمتر از آن، اینکه چگونه می توانید آن را کنترل کنید، می تواند به شما در نوشتن CSS قابل پیش بینی تر کمک کند.
مهم است که به خاطر داشته باشید که هر چیزی که توسط CSS نمایش داده می‌شود یک کادر است، حتی اگر فقط مقداری متن باشد یا دارای border-radius باشد که آن را شبیه یک دایره می‌کند.
محتوا و اندازه
جعبه ها بر اساس ارزش display ، ابعاد مجموعه و محتوایی که دارند، رفتار متفاوتی دارند. این محتوا می‌تواند متن ساده یا کادرهای بیشتری باشد که توسط عناصر فرزند تولید شده‌اند. در هر صورت، محتوا به طور پیش فرض بر اندازه جعبه تأثیر می گذارد.
شما می توانید این را با استفاده از اندازه خارجی کنترل کنید، یا می توانید از اندازه گیری داخلی استفاده کنید تا به مرورگر اجازه دهید بر اساس اندازه محتوا برای شما تصمیم بگیرد.
در اینجا یک نسخه آزمایشی اساسی وجود دارد که تفاوت را توضیح می دهد:
دمو عبارت "CSS is awesome" را در جعبه ای با ابعاد ثابت و حاشیه ضخیم دارد. از آنجایی که جعبه دارای عرض مشخصی است، اندازه بیرونی آن است. این بدان معنی است که اندازه محتوای فرزند خود را کنترل می کند. با این حال، کلمه "عالی" برای جعبه بسیار بزرگ است، بنابراین خارج از جعبه مرزی جعبه مادر سرریز می شود (در ادامه در این مورد بیشتر توضیح خواهیم داد). یکی از راه‌های جلوگیری از این سرریز این است که با تنظیم نکردن عرض، یا در این مورد، با تنظیم width روی min-content اجازه دهید جعبه به طور ذاتی اندازه شود. کلمه کلیدی min-content به جعبه می گوید که به اندازه عرض حداقل ذاتی محتوای آن (کلمه "عالی") پهن باشد. این به کادر اجازه می دهد تا کاملاً در اطراف متن قرار بگیرد.
در اینجا یک مثال پیچیده تر آمده است که تأثیر اندازه های مختلف بر محتوای واقعی را نشان می دهد:
اندازه داخلی را روشن و خاموش کنید تا ببینید که چگونه اندازه خارجی با اندازه خارجی کنترل بیشتری به شما می‌دهد و اندازه‌بندی داخلی به محتوا کنترل بیشتری می‌دهد. برای دیدن افکت ها چند جمله متن به کارت اضافه کنید. وقتی این عنصر دارای اندازه‌بندی خارجی باشد، محدودیتی برای مقدار محتوایی که می‌توانید قبل از سرریز شدن آن اضافه کنید وجود دارد، اما وقتی اندازه‌گذاری درونی روشن باشد این اتفاق نمی‌افتد.
به طور پیش فرض، این عنصر دارای width و height مجموعه ای 400px است. این ابعاد برای هر چیزی که در داخل عنصر است، محدودیت‌های سختی قائل می‌شود، مگر اینکه محتوا برای جعبه بزرگ باشد. می توانید با تغییر عنوان زیر عکس گل به چیزی که از ارتفاع جعبه بیشتر باشد، این را در عمل مشاهده کنید.
اصطلاح کلیدی: سرریز زمانی اتفاق می‌افتد که محتوا برای کادری که در آن قرار دارد بسیار بزرگ باشد. می‌توانید نحوه مدیریت یک عنصر با محتوای سرریز را با استفاده از ویژگی overflow مدیریت کنید.
جابجایی به اندازه ذاتی به مرورگر اجازه می‌دهد تا بر اساس اندازه محتوای جعبه برای شما تصمیم بگیرد. این باعث می شود که احتمال سرریز بسیار کمتر شود زیرا اندازه جعبه با محتوای آن تغییر می کند.
مهم است که به یاد داشته باشید که اندازه ذاتی رفتار پیش‌فرض مرورگر است و معمولاً انعطاف‌پذیری بسیار بیشتری نسبت به اندازه خارجی ارائه می‌دهد.
نواحی مدل جعبه
جعبه ها از قسمت های مدل جعبه مجزا تشکیل شده اند که همگی کار خاصی را انجام می دهند.
جعبه محتوا ناحیه‌ای است که محتوا در آن زندگی می‌کند. محتوا می‌تواند اندازه والد خود را کنترل کند، بنابراین این منطقه معمولاً متغیرترین منطقه است.
جعبه padding جعبه محتوا را احاطه کرده است و فضای ایجاد شده توسط ویژگی padding است. از آنجا که padding داخل جعبه است، پس زمینه جعبه در فضایی که ایجاد می کند قابل مشاهده است. اگر جعبه دارای قوانین سرریز تنظیم شده باشد، مانند overflow: auto یا overflow: scroll ، نوارهای پیمایش نیز این فضا را اشغال می کنند.
جعبه حاشیه جعبه padding را احاطه کرده است و فضای آن با مقدار border تعریف می شود که یک قاب بصری برای عنصر ایجاد می کند. لبه مرزی عنصر، حد چیزی است که می توانید ببینید.
ناحیه نهایی، کادر حاشیه ، فضای اطراف جعبه شما است که توسط قانون margin جعبه تعریف شده است. ویژگی هایی مانند outline و box-shadow نیز این فضا را اشغال می کنند زیرا در بالای عنصر نقاشی شده اند و بر اندازه جعبه تأثیر نمی گذارند. تغییر outline-width جعبه خود به اندازه 200px روی یک جعبه چیزی را در لبه حاشیه تغییر نمی دهد.
یک تشبیه مفید
درک مدل جعبه پیچیده است، بنابراین در اینجا قیاسی برای آنچه تاکنون آموخته اید آورده شده است.
در این نمودار شما سه قاب عکس دارید که در کنار یکدیگر روی دیوار نصب شده اند. عناصر تصویر قاب شده مطابق با مدل جعبه به شرح زیر است:
- جعبه محتوا اثر هنری است.
- جعبه بالشتک تخته نصب سفید رنگ، بین قاب و اثر هنری است.
- جعبه حاشیه قاب است که یک حاشیه واقعی برای اثر هنری فراهم می کند.
- کادر حاشیه فضای بین قاب ها است.
- سایه همان فضای کادر حاشیه را اشغال می کند.
اشکال زدایی مدل جعبه
مرورگر DevTools تجسمی از محاسبات مدل جعبه انتخاب شده را ارائه می دهد، که می تواند به شما کمک کند تا بفهمید مدل جعبه چگونه کار می کند و چگونه بر وب سایتی که روی آن کار می کنید تأثیر می گذارد.
این را در مرورگر خود امتحان کنید:
- DevTools را باز کنید .
- یک عنصر را انتخاب کنید .
- اشکال‌زدای مدل جعبه را نشان دهید.
مدل جعبه را کنترل کنید
برای درک نحوه کنترل مدل جعبه، ابتدا باید بدانید که در مرورگر شما چه اتفاقی می افتد.
هر مرورگر یک شیوه نامه عامل کاربر را برای اسناد HTML اعمال می کند که تعریف می کند اگر عناصر CSS تعریف شده نداشته باشند، چگونه باید ظاهر و رفتار کنند. CSS در شیوه نامه های عامل کاربر بین مرورگرها متفاوت است، اما آنها پیش فرض های معقولی را برای آسان تر خواندن محتوا ارائه می دهند.
یکی از ویژگی‌هایی که برگه سبک عامل کاربر display پیش‌فرض یک جعبه را تنظیم می‌کند. برای مثال، در یک جریان عادی، مقدار display پیش‌فرض عنصر <div> block است، یک <li> دارای مقدار display پیش‌فرض list-item و یک <span> دارای مقدار display پیش‌فرض inline است.
یک عنصر inline حاشیه بلوک دارد، اما سایر عناصر به آن احترام نمی گذارند. با inline-block ، سایر عناصر به حاشیه بلوک احترام می گذارند، اما عنصر اول بیشتر رفتارهای مشابهی را که به عنوان عنصر inline داشت، حفظ می کند. یک آیتم block به طور پیش فرض فضای درون خطی موجود را پر می کند، در حالی که عناصر inline و inline-block فقط به اندازه محتوایشان بزرگ هستند.
شیوه نامه عامل کاربر نیز box-sizing تنظیم می کند که به یک جعبه می گوید چگونه اندازه جعبه خود را محاسبه کند. به طور پیش فرض، همه عناصر دارای سبک عامل کاربر زیر هستند: box-sizing: content-box; . این بدان معنی است که وقتی ابعادی مانند width و height را تنظیم می کنید، این ابعاد برای کادر محتوا اعمال می شود. اگر padding و border را تنظیم کنید، این مقادیر به اندازه جعبه محتوا اضافه می شوند.
درک خود را بررسی کنید
دانش خود را در مورد خواص تأثیرگذار بر اندازه مدل جعبه آزمایش کنید.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
به نظر شما .my-box چقدر پهن خواهد بود؟
box-sizing: border-box 200px درست است. عرض واقعی این جعبه 260 پیکسل است. از آنجایی که CSS box-sizing: content-box ، عرض اعمال‌شده عرض محتوا است و padding و border در دو طرف به آن اضافه می‌شود. 200px برای محتوا + 40px از بالشتک + 20px حاشیه باعث می شود در مجموع عرض قابل مشاهده 260px باشد.
شما می توانید این مورد را با تعیین اندازه border-box تغییر دهید:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
این مدل جعبه جایگزین به CSS می گوید که به جای جعبه محتوا، width را به کادر حاشیه اعمال کند. این بدان معناست که border و padding ما به داخل فشار داده می شود، بنابراین وقتی .my-box روی 200px تنظیم کنید، در واقع با عرض 200px نمایش داده می شود.
نحوه کار این کار را در نسخه ی نمایشی تعاملی زیر بررسی کنید. هنگامی که مقدار box-sizing تغییر می دهید، ناحیه آبی نشان می دهد که کدام CSS در داخل کادر اعمال می شود.
*,
*::before,
*::after {
box-sizing: border-box;
}
این قانون CSS هر عنصر در سند و هر عنصر ::before و ::after شبه را انتخاب می کند و box-sizing: border-box را اعمال می کند. این بدان معنی است که اکنون هر عنصر از این مدل جعبه جایگزین استفاده می کند.
از آنجایی که مدل جعبه جایگزین می‌تواند قابل پیش‌بینی‌تر باشد، توسعه‌دهندگان اغلب این قانون را به بازنشانی‌ها و نرمال‌کننده‌ها اضافه می‌کنند، مانند این .