50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – تنظیم ابعاد در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی Overflow در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه تنظیم ابعاد در CSS آشنا کنیم.

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

تنظیم ابعاد در CSS :

زبان CSS خصوصیت های متعددی همچون عرض، ارتفاع ، ماکزیموم عرض و ماکزیموم ارتفاع را فراهم می کند. این موضوع به شما اجازه می دهد ابعاد جعبه را کنترل کنید.

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

تنظیم طول و عرض ( Height , Width ) عناصر در CSS

خصوصیت عرض و ارتفاع می تواند عرض و ارتفاع  ناحیه محتوای یک المان را تعریف نماید.

این عرض و ارتفاع مواردی همچون paddings،border یا margin را فراهم نمی کند.

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

خصوصیت عرض و ارتفاع می تواند مقادیری همچون طول( px، pt، em) ، درصد یا کلیدواژه را اتخاذ نماید. طول منفی در این خصوصیت مجاز نیست.

این قانون سبک دهی  عرض ثابت ۳۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل را به المان Div  اختصاص می دهد.

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

خصوصیت max-height:

خصوصیت max-height به شما اجازه می دهد ماکزیموم ارتفاع محتوای جعبه را مشخص نمایید. ارتفاع حداکثر در برگیرنده paddings،border یا margin نیست.

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

به عنوان مثال اگر ارتفاع بر روی ۲۰۰ پیکسل تنظیم شده باشد و max-height  بر روی ۱۰۰ پیکسل تنظیم باشد، ارتفاع واقعی همان ۱۰۰ پیکسل خواهد بود.

خصوصیت max-height  معمولا به همراه خصوصیت  min-height  به کار می رود تا بتواند محدوده ارتفاع برای المان را تولید نماید.

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

خصوصیت min-height :

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

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

به عنوان مثال اگر ارتفاع بر روی ۲۰۰ پیکسل و min-height  بر روی ۳۰۰ تنظیم شده باشد، ارتفاع واقعی المان همان ۳۰۰ پیکسل خواهد بود.

خصوصیت min-height   معمولا به همراه خصوصیت max-height به کار می رود تا بتواند محدوده ارتفاعی برای المان ایجاد نماید.

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

خصوصیت max-width:

خصوصیت max-width به شما اجازه می دهد عرض حداکثر بلوک  محتوا را مشخص کنید. این حداکثر عرض در برگیرنده paddings،border یا margin نیست.

المانی که حداکثر عرض بر روی آن اعمال شده است هرگز نمی تواند  عریض تر از مقداری مشخص شده باشد حتی اگر  خصوصیت عرض بر روی مقدار بزرگ تر تنظیم شده باشد.

خصوصیت max-width  به همراه خصوصیت min-width  مورد استفاده قرار می گیرد تا بتواند محدوده عرضی برای المان ایجاد نماید.

نکته: استثنایی برای این قانون وجود دارد. اگر خصوصیت min-width  با مقداری بزرگ تر از خصوصیت max-width  مشخص شده باشد در این شرایط مقدار min-width  چیزی است که اعمال خواهد شد.

خصوصیت min-width:

این خصوصیت به شما اجازه می دهد حداقل عرض بلوک محتوایی را مشخص نمایید. عرض حداقل در برگیرنده paddings،border یا margin نیست.

المانی که min-width  بر روی آن اعمال شده است هرگز باریک تر از عرص حداقل مشخص شده نخواهد بود.

به عنوان مثال اگر عرض بر روی ۳۰۰ و عرض حداقل بر روی ۴۰۰ پیکسل تنظیم شده باشد، عرض واقعی المان ۴۰۰ پیکسل خواهد بود.

خصوصیت min-width  اغلب به همراه خصوصیت max-width  برای ایجاد محدوده عرض المان مورد استفاده قرار می گیرد.

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

 

امیدوارم در این بخش آموزش CSS, از تنظیم ابعاد در CSS نهایت استفاده را برده باشید.

در بخش بعدی با واحدهای اندازه گیری در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

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

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link