در جلسه قبل از آموزش CSS با ویژگی Overflow در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه تنظیم ابعاد در CSS آشنا کنیم.
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.
تنظیم ابعاد در CSS :
زبان CSS خصوصیت های متعددی همچون عرض، ارتفاع ، ماکزیموم عرض و ماکزیموم ارتفاع را فراهم می کند. این موضوع به شما اجازه می دهد ابعاد جعبه را کنترل کنید.
بخش زیر به شما کمک می کند نحوه استفاده از این خصوصیت ها را برای ایجاد طرح بهتر صفحه یاد بگیرید.
تنظیم طول و عرض ( Height , Width ) عناصر در CSS
خصوصیت عرض و ارتفاع می تواند عرض و ارتفاع ناحیه محتوای یک المان را تعریف نماید.
این عرض و ارتفاع مواردی همچون paddings،border یا margin را فراهم نمی کند.
اگر می خواهید به طور موثر عرض و ارتفاع را محاسبه کنید و نحوه محاسبه آن را یاد بگیرید بهتر است سری به مقاله مدل جعبه ای CSS بزنید.
خصوصیت عرض و ارتفاع می تواند مقادیری همچون طول( px، pt، em) ، درصد یا کلیدواژه را اتخاذ نماید. طول منفی در این خصوصیت مجاز نیست.
|
1 2 3 4 |
div { width: 300px; height: 200px; } |
این قانون سبک دهی عرض ثابت ۳۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل را به المان Div اختصاص می دهد.
نکته: مقادیر خودکار خاص به مرورگرها اجازه می دهد عرض را برای المان مشخص شده به صورت خودکار محاسبه نمایند. مقدار درصدی به عرض بلوک در برگیرنده المان اشاره دارد.
خصوصیت max-height:
خصوصیت max-height به شما اجازه می دهد ماکزیموم ارتفاع محتوای جعبه را مشخص نمایید. ارتفاع حداکثر در برگیرنده paddings،border یا margin نیست.
المانی که خصوصیت max-height را داشته باشد هرگز بلندتر از مقدار مشخص شده نخواهد بود حتی اگر خصوصیت ارتفاع بر روی مقدار بیشتری تنظیم شده باشد.
به عنوان مثال اگر ارتفاع بر روی ۲۰۰ پیکسل تنظیم شده باشد و max-height بر روی ۱۰۰ پیکسل تنظیم باشد، ارتفاع واقعی همان ۱۰۰ پیکسل خواهد بود.
|
1 2 3 4 |
div { height: 200px; max-height: 100px; } |
خصوصیت max-height معمولا به همراه خصوصیت min-height به کار می رود تا بتواند محدوده ارتفاع برای المان را تولید نماید.
نکته: برای این قانون استثنایی وجود دارد. اگر خصوصیت min-height با مقداری مشخص شده باشد که بزرگتر از خصوصیت max-height است، در این شرایط مقدار min-height چیزی است که اعمال می شود.
خصوصیت min-height :
خصوصیت min-height به شما اجازه می دهد حداقل ارتفاع بلوک محتوا را مشخص نمایید. این ارتفاع حداقل در برگیرنده paddings،border یا margin نیست.
المانی که این خصوصیت بر روی آن اعمال شده است هرگز کوچک تر از ارتفاع حداقل مشخص شده نخواهد بود.
به عنوان مثال اگر ارتفاع بر روی ۲۰۰ پیکسل و min-height بر روی ۳۰۰ تنظیم شده باشد، ارتفاع واقعی المان همان ۳۰۰ پیکسل خواهد بود.
|
1 2 3 4 |
div { height: 200px; min-height: 300px; } |
خصوصیت min-height معمولا به همراه خصوصیت max-height به کار می رود تا بتواند محدوده ارتفاعی برای المان ایجاد نماید.
نکته: خصوصیت min-height معمولا برای اطمینان حاصل کردن از اینکه المان حداقل ارتفاع را دارد مورد استفاده قرار می گیرد. با اینحال المان مجاز است در صورت تجاوز محتوا از ارتفاع حداقل تنظیم شده، به صورت طبیعی رشد کند.
خصوصیت max-width:
خصوصیت max-width به شما اجازه می دهد عرض حداکثر بلوک محتوا را مشخص کنید. این حداکثر عرض در برگیرنده paddings،border یا margin نیست.
المانی که حداکثر عرض بر روی آن اعمال شده است هرگز نمی تواند عریض تر از مقداری مشخص شده باشد حتی اگر خصوصیت عرض بر روی مقدار بزرگ تر تنظیم شده باشد.
|
1 2 3 4 |
div { width: 300px; max-width: 200px; } |
خصوصیت max-width به همراه خصوصیت min-width مورد استفاده قرار می گیرد تا بتواند محدوده عرضی برای المان ایجاد نماید.
نکته: استثنایی برای این قانون وجود دارد. اگر خصوصیت min-width با مقداری بزرگ تر از خصوصیت max-width مشخص شده باشد در این شرایط مقدار min-width چیزی است که اعمال خواهد شد.
خصوصیت min-width:
این خصوصیت به شما اجازه می دهد حداقل عرض بلوک محتوایی را مشخص نمایید. عرض حداقل در برگیرنده paddings،border یا margin نیست.
المانی که min-width بر روی آن اعمال شده است هرگز باریک تر از عرص حداقل مشخص شده نخواهد بود.
به عنوان مثال اگر عرض بر روی ۳۰۰ و عرض حداقل بر روی ۴۰۰ پیکسل تنظیم شده باشد، عرض واقعی المان ۴۰۰ پیکسل خواهد بود.
|
1 2 3 4 |
div { width: 300px; min-width: 400px; } |
خصوصیت min-width اغلب به همراه خصوصیت max-width برای ایجاد محدوده عرض المان مورد استفاده قرار می گیرد.
نکته: خصوصیت min-width برای اطمینان حاصل کردن از اینکه المان حداقل عرض را دارد مورد استفاده قرار می گیرد. با این حال اگر محتوا از مقدار عرص حداقل تنظیم شده تجاوز کرد، المان مجاز است به صورت طبیعی رشد کند.
امیدوارم در این بخش آموزش CSS, از تنظیم ابعاد در CSS نهایت استفاده را برده باشید.
در بخش بعدی با واحدهای اندازه گیری در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
