عضویت در سایت

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

کد امنیتی برای بروزرسانی کد امنیتی روی تصویر کلیک کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1036 آموزش و 1854 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش Css – قسمت دهم(Box Model)

سلام

با دهمین قسمت از آموزش های Css در خدمتتون هستیم، در این قسمت قصد داریم بپردازیم به Box Model، که در ادامه همراه بپرسم باشید تا با این مفهوم آشنا شویم.

آموزش:

تمامی عناصر HTML را می توانیم به صورت یک مستطیل چهار گوش در نظر بگیریم، و در واقع مفهوم Box Model، را میتوانیم چهارگوشه ی یک عنصر در نظر بگیریم.
مفهوم یک Box در Css نشان دهنده محیط اطراف یک عنصر HTML هست که دارای خصوصیات Border, Padding, Margin, Content است.

  • در تصویر زیر Box Model شرح داده شده است:
box-model

box-model

توضیح بخش های مختلف:

  • Content: محتوای داخل یک Box, که می تواند شامل تصویر، متن، جدول و … باشد.
  • Padding: نواحی اطراف Content را از بین می برد.
  • Border: اطراف Padding و Content را می پوشاند.
  • Margin: نواحی اطراف Border را از بین می برد.

توسط Box Model می توانیم فضای اطراف عناصر و حاشیه های خالی بین عناصر را تعریف کنیم.

  • نمونه کد زیر را در نظر بگیرید:

ذخیره کنید و نتیجه را ببینید، در مثال بالا Box Model به طور کامل رعایت شده(Content, Border, Padding, Margin).

عرض و ارتفاع یک عنصر:

برای تعریف عرض و ارتفاء یک عنصر  که به درستی در همه مرورگرها نمایش داده شود، باید این را بدانید که Box Model چگونه کار میکند.

نکته: هنگامی که عرض و ارتفاع یک عنصر  را با Css تنظیم میکنید، برای محاسبه اندازه کامل و دقیق یک عنصر باید padding, border و margin های اطراف عنصر را هم در نظر بگیرید.

در مثال زیر فرض میکنیم به تگ <div> عرض ۳۵۰ پیکسل میخواهیم بدهیم، به این شکل عمل میکنیم:

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

نحوه محاسبه:

برای محاسبه عرض یک عنصر به شکل زیر عمل میکنیم:

همینطور برای ارتفاع نیز به همین شکل عمل میکنیم:

در واقع Box Model یکی از مهمترین مباحث Css هست، برای اینکه بتونید عرض دقیق و یکسانی به همه ی عناصر موجود در صفحه بدید باید با مفهوم Box Model و چگونگی محاسبه عرض و ارتفاع که در بالا گفته شد، آشنا باشید.

این جلسه از Css نیز به پایان رسید، همراه ما باشید با دیگر جلسات آموزشی …

موفق باشید.

 

درباره احمد آخوندیمدیر سایت

طراح و برنامه نویس وب| تعمیرکار کامپیوتر و ماشین های اداری | علاقه مند یادگیری و یاددادن ... :)

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و… را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند.