برای یک طراح وب، چیدمان دقیق عناصر در طراحی یک صفحه وب بسیار مهم است، به همین دلیل طراح وب، باید نحوه ی محاسبات box model (باکس مدل) در css را بداند. در مباحث قبلی فیلم های آموزش طراحی سایت، سه مشخصه ی اصلی padding, margin و border در box model را بطور جداگانه برای شما کاربران عزیز توضیح دادیم، در این فیلم آموزشی، نحوه ی محاسبه ی اندازه یک عنصر یا همان box در box model را به شما خواهیم آموخت.
آنچه در این فیلم آموزشی خواهید آموخت :
- آشنایی با قوانین محاسبه ی box model
- نحوه ی محاسبه ی اندازه ی یک عنصر در css با مثال های کاربردی
- بیان مواردی که طراحان وب در محاسبات box model رعایت نمی کنند.
- بیان کاربرد استفاده از مشخصه ی display در box model ( برای آشنایی کامل با مشخصه ی display، فیلم آموزش کاربرد display در css را می توانید مشاهده کنید.)
برای مشاهده ی کاربرد مشخصه float در مبحث box model، می توانید فیلم آموزشی آن را در این قسمت مشاهده کنید.
[hdplay id=56]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[free_vip]
[video_download cat=’html’ url=’https://onliner.co/css-videos/box-model-calculation.mp4′]دانلود فیلم آموزش محاسبات Box Model در CSS[/video_download]
[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/css-snippets/box-model.zip’]دانلود دمو[/onliner_button]
[/free_vip]
دسترسی سریع :
- آموزش قبلی : فیلم آموزش ساخت یک منوی آکاردئونی براساس طرح گرافیکی
- آموزش بعدی : فیلم آموزش وسط چین کردن متن بصورت افقی و عمودی با CSS
- لیست فیلم ها : فیلم های آموزش جامع CSS
6 دیدگاه دربارهٔ «فیلم آموزش محاسبات Box Model در CSS»
سلام مجدد آقای مهندس آبسالان عزیز
آقای مهندس در دقیقه 18:40(تقریبا در انتها) از فیلم فرمودین که css دارای property یی هست که نحوه محاسبه box-model رو تغییر بده و گرنه در صورت پیش فرض همه مقادیر Padding ها، borderها و margin ها رو باید در نظر بگیریم. !! میخواستم ببینم این گفته شما به چه معناست و کدوم property هستش؟؟ همون width و height هستن؟؟
با عرض سلام و احترام خدمت شما
این property که فرمودید، box-sizing هست.
سلام آقای مهندس؛ از فیلم آموزشی خوبتون ممنون و متشکرم. آقای مهندس یه سوالی که اینجا به ذهنم رسید و خودم نیز اشتباه کردم این بود که در دقیقه 10 فیلم که داشتین اندازه wrapper رو با توجه به مقادیری که به box ها داده بودین محاسبه می کردین؛ چرا margin-top اولین div و همچنین margin-bottom آخرین div رو محاسبه نکردین؟؟ همچنین چرا المنت اولی و سومی تا زمانی که بهشون float ندادیم کاملا میچسبن به wrapper؟ یا اینکه مثلا باید به wrapper خاصیت inline-block رو میدادیم که المنتهای داخلش از چسبندگی که دارن رهایی پیدا کنن. ممنون میشم اگه توضیح بدین این مورد رو.
بازتاب: آموزش CSS | آموزش لایه بندی (layout) و چیدمان کلی صفحات وب
بازتاب: آموزش CSS | بررسی رابطه عناصر شناور با مبحث Box Model در CSS
بازتاب: آموزش CSS | معرفی مشخصه padding در CSS