آموزش CSS

آموزش CSS - مدل جعبه ای

مدل جعبه ای نشان می دهد که عناصر چگونه به صورت بصری در صفحات وب قرار گرفته اند.

مدل جعبه در CSS چیست؟

هر المانی را که بتوان در صفحات وب نشان داد از یک یا چند جعبه مستطیلی شکل تشکیل شده است. مدل جعبه ای CSS معمولا  نشان می دهد که این جعبه های مستطیلی چگونه در صفحات وب قرار می گیرند. این جعبه ها  ممکن است خصوصیت های متفاوتی اتخاذ نمایند و به شیوه مختلفی با همدیگر تعامل داشته باشند اما به خاطر داشته باشید که هر جعبه ای دارای ناحیه محتوایی و حاشیه، padding و سایر موارد است. نمودار زیر نشان می دهد که چگونه خصوصیت های حاشیه، مرز و Padding فضای بین عناصر در صفحات وب را تعیین می کنند.

css box model

عرض و ارتفاع المان ها:

معمولا زمانی که عرض و ارتفاع یک المان را به کمک خصوصیت های width و height تنظیم می کنید، در واقعیت تنها عرض و ارتفاع ناحیه محتوایی یک المان را تعریف می نمایید. عرض و ارتفاع واقعی جعبه به فاکتورهای متعددی بستگی دارد.  فضای واقعی که جعبه عناصر ممکن است داشته باشد به شیوه زیر محاسبه می گردد:

اندازه جعبه

CSS خصوصیت های

عرض کلی

width + padding-left + padding-right + border-left + border-right+ margin-left + margin-right

ارتفاع کلی

height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

نکته: در  مدل جعبه ای CSS، ناحیه محتوایی یا متنی یک  جعبه همان ناحیه ای است که متن، تصویر، لیست ها، جداول، فرم ها، فایل های ویدئویی و سایر موارد نمایش داده می شود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...