لطفا صبر کنید...

آموزش رایگان فرانت اند جلسه 11؛ CSS Box

سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل میشود.

در جلسه اول با معرفی برنامه نویسی وب در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome ، لینک‌ها و تصاویر آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div ، تگ‌های معنادار ، آشنایی با CSS در خدمتتان بودیم. همینطور در جلسه قبل تحت عنوان انواع سلکتورها و همینطور روش‌های لینک کردن CSS و HTML در خدمتتان بودیم. در این جلسه قرار است تا با اندازه‌ها و CSS Box آشنا شویم.

پس با ما همراه باشید. ?‍?
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤?

جهت دانلود فایل‌های این جلسه اینجا کلیک کنید

هر المنت در HTML می‌تواند یک عرض (width) و یک ارتفاع (height) داشته باشد که در مجموع سایز یا اندازه آن المنت در صفحه را ایجاد خواهد کرد. خصوصیات مختلف دیگری مثل خصوصیت رنگ پس زمینه یا همان background و border را نیز می‌توانیم به آن بدهیم. اما از همه این موارد مهم‌تر این است که بدانیم CSS Box هر المنت دقیقا یعنی چه؟ و هر المنت دقیقا چقدر فضا اشغال می‌کند. به تصویر زیر دقت کنید.

css box

هر المنت که قابلیت نمایش در صفحه را داشته باشد، به ترتیب از هسته المنت که به سمت بیرون حرکت می‌کنیم، اول سایز خود المنت را داریم. سپس فضای داخلی از بیرون یا همان padding. حاشیه یا border و در انتها margin یا فاصله خارجی را خواهیم داشت.

به طور مثال اگر عرض یک المنت ۳۵۰ پیکسل باشد، padding آن ۲۰ پیکسل و border آن ۴۰ پیکسل باشد، در مجموع این المنت ۳۵۰ + ۲۰ + ۲۰ + ۴۰ + ۴۰ پیکسل که ۴۷۰ پیکسل خواهد شد، عرض صفحه را خواهد گرفت.