پادکست 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
چقدر پهن خواهد بود؟
عرض واقعی این جعبه 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
را اعمال می کند. این بدان معنی است که اکنون هر عنصر از این مدل جعبه جایگزین استفاده می کند.
از آنجایی که مدل جعبه جایگزین میتواند قابل پیشبینیتر باشد، توسعهدهندگان اغلب این قانون را به بازنشانیها و نرمالکنندهها اضافه میکنند، مانند این .