فیلم آموزش محاسبات Box Model در CSS

آموزش محاسبات Box Model در CSS

برای یک طراح وب، چیدمان دقیق عناصر در طراحی یک صفحه وب بسیار مهم است، به همین دلیل طراح وب، باید نحوه ی محاسبات 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]

دسترسی سریع :

به این صفحه رتبه دهید

6 دیدگاه دربارهٔ «فیلم آموزش محاسبات Box Model در CSS»

  1. سلام مجدد آقای مهندس آبسالان عزیز
    آقای مهندس در دقیقه 18:40(تقریبا در انتها) از فیلم فرمودین که css دارای property یی هست که نحوه محاسبه box-model رو تغییر بده و گرنه در صورت پیش فرض همه مقادیر Padding ها، borderها و margin ها رو باید در نظر بگیریم. !! میخواستم ببینم این گفته شما به چه معناست و کدوم property هستش؟؟ همون width و height هستن؟؟

    1. آواتار گروه آموزش طراحی سایت
      گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      این property که فرمودید، box-sizing هست.

  2. سلام آقای مهندس؛ از فیلم آموزشی خوبتون ممنون و متشکرم. آقای مهندس یه سوالی که اینجا به ذهنم رسید و خودم نیز اشتباه کردم این بود که در دقیقه 10 فیلم که داشتین اندازه wrapper رو با توجه به مقادیری که به box ها داده بودین محاسبه می کردین؛ چرا margin-top اولین div و همچنین margin-bottom آخرین div رو محاسبه نکردین؟؟ همچنین چرا المنت اولی و سومی تا زمانی که بهشون float ندادیم کاملا میچسبن به wrapper؟ یا اینکه مثلا باید به wrapper خاصیت inline-block رو میدادیم که المنتهای داخلش از چسبندگی که دارن رهایی پیدا کنن. ممنون میشم اگه توضیح بدین این مورد رو.

  3. بازتاب: آموزش CSS | آموزش لایه بندی (layout) و چیدمان کلی صفحات وب

  4. بازتاب: آموزش CSS | بررسی رابطه عناصر شناور با مبحث Box Model در CSS

  5. بازتاب: آموزش CSS | معرفی مشخصه padding در CSS

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top