آموزش height and width در css

//

آموزش height and width در css

بنام خدا سلام ,

در خدمت شما عزیزان هستم یا یکی دیگه از آموزش وب سایت پاسخ وردپرس .
توی این جلسه آموزش HTML5 و CSS3  میخواهیم طول (height ) و عرص ( width ) خدمت شما آموزش یدیم پس با من همراه باشید .

آموزش height در css

خاصیت height

توسط این خاصیت شما میتونید ارتفاع یک عنصر رو مشخص کنید .

آموزش عرض و طول در css

مقادیر خاصیت height

  • Auto : مرورگر بصورت خودکار ارتفاع رو تشخیص میده ، مقدار پیشفرض این خاصیت هست .
  • Lengh : شما میتونید از مقیاس های em , px , % برای تعیین ارتفاع استفاده کنید .
  • Initial : مقدار پیشفرض این خاصیت هست .
  • Inherit : در صورتی که عنصر فرزند این مقدار رو داشته باشه ، هر چی که مقدار عنصر والد باشه به ارث میبره .

خاصیت min-height

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

خاصیت max-height

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

به مثال زیر دقت نمایید:

این درصد با توجه به ارتفاع بلوک حاوی محاسبه می شود. اگر ارتفاع بلوک حاوی صراحت مشخص نشده باشد، مقدار درصد به عنوان هیچ کدام مورد بررسی قرار نمی گیرد. max-heightاموال جز به تمام عناصر اعمال خواهد شد.

خاصیت width

توسط این خاصیت شما میتونید عرض یک عنصر رو مشخص کنید .

مقادیر خاصیت width

  • Auto : مرورگر بصورت خودکار عرض رو تشخیص میده ، مقدار پیشفرض این خاصیت هست .
  • Lengh : شما میتونید از مقیاس های em , px , % برای تعیین عرض استفاده کنید .
  • Initial : مقدار پیشفرض این خاصیت هست .
  • Inherit : در صورتی که عنصر فرزند این مقدار رو داشته باشه ، هر چی که مقدار عنصر والد باشه به ارث میبره .

آموزش widht and height

خاصیت min-width

توسط این خاصیت حداقل عرض رو برای عنصر تعیین می کنید .

خاصیت max-width

توسط این خاصیت حداکثر عرض رو برای عنصر تعیین می کنید .

نکته : برای کدنویسی های ریسپانسیو برای تصاویر شما max-width رو برابر ۱۰۰% قرار میدید ، در این صورت با کوچک و بزرگ شدن پنجره مرورگر ، تصویر هم تغییر سایز پیدا میکنه .

خوب دوستان این جلسه  از آموزش های وب سایت پاسخ وردپرس هم به اتمام رسید ، اگر سوالی یا ابهامی براتون پیش اومد حتما مطرح کنید

آگه این آموزش را دوست داشتید به دوستان خود توی شبکه های اجتماعی به اشتراک بزاردید.

از ۱ تا ۵ امتیاز بدید.

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

سبد خرید
در حال بروز رسانی