عضویت در سایت

ورود

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

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

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

ورود

عضویت در سایت

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

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

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

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

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

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

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

آموزش css قسمت نهم – (Height & Width)

سلام

با قسمت نهم از آموزش css در خدمتتون هستیم، در دو قسمت قبلی دو مفهوم مهم Margin و Padding را گفتیم، حال در این قسمت می پردازیم به دو خاصیت height(ارتفا) و width(عرض)، در ادامه همراه بپرسم باشید.

آموزش:

توسط خاصیت height میتوانیم ارتفاء یک عنصر و توسط width می توانیم عرض یک عنصر را تعیین کنیم.

خصوصیات height و width را میتوانیم توسط واحدهای اندازه گیری نظیر px, cm, %, em و … مشخص کنیم، که از بین واحدهای اندازه گیری px, em و % رایج هستند که اکثر طراحان وب از همین سه واحد اندازه گیری استفاده می کنند، واحد اندازه گیری px اگر استفاده کنید میتوانید هر عددی را قرار دهید

در واحد اندازه گیری px میتوانید هر عددی را قرار دهید، ولی برای واحد اندازه گیری % چون واحد بر اساس درصد است باید عددی ببین ۱ تا ۱۰۰ را انتخاب کنید.

  • مثال زیر را در نظر بگیرید، در این مثال یک <div> تعریف کردیم و ارتفاع و عرض را برابر ۲۰۰px گذاشتیم:

  • حال همین مثال بالا را با واحد اندازه گیری % انجام میدهیم(مقداری بین ۱ تا ۱۰۰ قرار میدیم)، عرض را برابر %۵۰ قرار میدهیم.
مطلب پیشنهادی:  معرفی ربات تلگرام تبدیل فایل به PDF

سوال: حال فرق بین px و % در چیست؟

جواب: واحد اندازه گیری px که مخفف پیکسل است، بر اساس پیکسل اندازه گیری می شود و حد و مرزی ندارد، ولی واحد اندازه گیری % نسبت به عرض و ارتفاع صفحه نمایش تعیین می شود، برای مثال اگر شما عرض یک عنصر را %۵۰ در نظر بگیرید، نسبت به اندازه صفحه نمایش عنصر ۵۰ درصد از صفحه نمایش را در بر میگیرد(در موبایل، تبلت، صفحه نمایش های بزرگ و کوچک فرقی نمیکند).

  • max-height, max-width و min-height و min-width

توسط max-width و max-height می توانیم حداکثر ارتفا و عرض یک عنصر را تعریف کنیم و همچنین توسط main-width و min-height حداقل ارتفاع و عرض یک عنصر را تعریف کنیم.

تنظیم این خصوصیات باعث میشود، عرض و ارتفاع عناصر از مقداری که تعیین کردید، کمتر یا بیشتر نشود.

  • در مثال زیر بجای به تگ div مقدار max-width دادیم:

  • خصوصیات مربوط به ابعاد
مطلب پیشنهادی:  آموزش مقدماتی اکسل – قسمت ششم(پیمایش در صفحه)

در جدول زیر خصوصیات مربوط به ابعاد آورده شده است.

خصوصیت

توضیح

height

تنظیم ارتفاع یک عنصر

max-height

تنظیم حداکثر ارتفاع یک عنصر

max-width

تنظیم حداکثر عرض یک عنصر

min-height

تنظیم حداقل ارتفاع یک عنصر

min-width

تنظیم حداقل عرض یک عنصر

width

تنظیم عرض یک عنصر

این قسمت از آموزش css نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

موفق باشید.

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

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

دنبال کردن

ارسال نظر

رفتن به بالا

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

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

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