خانه / آموزش CSS / بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
آموزش تنظیم ارتفاع و عرض در CSS"

تاریخ بروزرسانی: ۱۹ بهمن ۱۳۹۷ تعداد بازدید : 11 بازدید بدون دیدگاه

بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

قدم قبلی >< قدم بعدی
آموزش تنظیم ارتفاع و عرض در CSS
تنظیم ارتفاع و عرض در CSS

 

تنظیم ارتفاع و عرض در CSS

ویژگی های height و width برای تنظیم ارتفاع و عرض در CSS برای یک عنصر استفاده می شود.

ارتفاع و عرض را می توان به خودکار تنظیم کرد (این به طور پیش فرض مورد استفاده است؛ به این معنی که مرورگر ارتفاع و عرض را محاسبه می کند) یا در مقادیر طول مانند: پیکسل، سانتی متر یا درصد (٪) بلوک حاوی مطلب و غیره  مشخص می شود .

مثال:

اگر کد بالا را اجرا کنید تصویر زیر را در خروجی خواهید دید:

همین حالا ببینید:  بخش سوم-بررسی style sheets در CSS

تنظیم ارتفاع و عرض در CSS

 

یک مثال دیگر:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

آموزش تنظیم ارتفاع و عرض در CSS

 

نکته: ویژگی های ارتفاع و عرض شامل padding، borders یا margins نیست. آنها ارتفاع/عرض ناحیه داخل پدینگ، مرز و حاشیه عنصر را جدا تنظیم می کنند!

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

خصوصیت max-width برای تعیین حداکثر عرض یک عنصر استفاده می شود.

حداکثر عرض را می توان در مقادیر طول، مانند پیکسل px، سانتی متر cm و غیره، یا درصد (٪) بلوک حاوی مطلب مشخص کرد یا با مقدار none(هیچ) (مقدار هیچ به طور پیش فرض است. به این معنی که حداکثر عرض وجود ندارد).

همین حالا ببینید:  بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

مشکل با <div> بالا زمانی رخ می دهد که پنجره مرورگر کوچکتر از عرض عنصر (۵۰۰px) است. مرورگر پس از آن یک اسکرول افقی را به صفحه اضافه می کند.

با استفاده از حداکثر عرض، در این وضعیت، مرورگر پنجره های کوچک را بهبود می بخشد.

نکته: پنجره مرورگر را به کوچکتر از ۵۰۰ پیکسل عرض بکشید، تا تفاوت بین دو div وجود داشته باشد!

نکته: مقدار حداکثر عرض ابعاد عرض را فراتر می برد.

مثال زیر یک عنصر <div> با ارتفاع ۱۰۰ پیکسل و عرض حداکثر ۵۰۰ پیکسل را نشان می دهد:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

همین حالا ببینید:  بخش پانزدهم- آموزش لینک ها در css یا آموزش CSS Links

حداکثر عرض

 

 

 

گام قبلی >< گام بعدی

 

بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15244


کانال تلگرام تیک تم

مطلب پیشنهادی

آموزش فونت CSS در وردپرس

بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

  فونت CSS خصوصیات فونت CSS ، خانواده فونت، ضخامت، اندازه و سبک متن را …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *