shams 07 خرداد 1393 6 4421 بازدید آموزش 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، می توانید فیلم آموزشی آن را در این قسمت مشاهده کنید.

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

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

نظرات کاربران (6)



  1. داوود

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

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

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

  2. داوود

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