آموزش CSS

آموزش CSS - ابعاد

خصوصیت dimension در زبان برنامه نویسی CSS برای کنترل ارتفاع و عرض المان مورد استفاده قرار می گیرد.

خصوصیت dimension در زبان برنامه نویسی CSS:

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

خصوصیت عرض و ارتفاع:

خصوصیت عرض و ارتفاع می تواند عرض و ارتفاع  ناحیه محتوای یک المان را تعریف نماید. این عرض و ارتفاع مواردی همچون paddings،border یا margin را فراهم نمی کند. اگر می خواهید به طور موثر عرض و ارتفاع را محاسبه کنید و نحوه محاسبه آن را یاد بگیرید بهتر است سری به مقاله مدل جعبه ای CSS بزنید.  خصوصیت عرض و ارتفاع می تواند مقادیری همچون طول( پیکسل، PT، Em) ، درصد یا کلیدواژه را  اتخاذ نماید. طول منفی در این خصوصیت مجاز نیست.

div {
    width: 300px;
    height: 200px;
}

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

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

خصوصیت max-height:

خصوصیت max-height به شما اجازه می دهد ماکزیموم ارتفاع محتوای جعبه را مشخص نمایید. ارتفاع ماکزیموم در برگیرنده paddings, borders یا margin نیست.  المانی که خصوصیت max-height  را داشته باشد هرگز بلندتر از مقدار مشخص شده نخواهد بود حتی اگر خصوصیت ارتفاع بر روی مقدار بیشتری تنظیم شده باشد. به عنوان مثال اگر ارتفاع بر روی 200 پیکسل تنظیم شده باشد و max-height  بر روی 100 پیکسل تنظیم گشته باشد، ارتفاع واقعی همان 100 پیکسل خواهد بود.

div {
    height: 200px;
    max-height: 100px;
}

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

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

خصوصیت min-height :

خصوصیت min-height  به شما اجازه می دهد حداقل ارتفاع بلوک محتوا را مشخص نمایید. این ارتفاع حداقل در برگیرنده paddings, borders یا margins نیست. المانی که این خصوصیت بر روی آن اعمال شده است هرگز کوچک تر از ارتفاع حداقل مشخص شده نخواهد بود. به عنوان مثال اگر ارتفاع بر روی 200 پیکسل و min-height  بر روی 300 تنظیم شده باشد، ارتفاع واقعی المان همان 300 پیکسل خواهد بود.

div {
    height: 200px;
    min-height: 300px;
}

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

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

خصوصیت max-width:

خصوصیت max-width به شما اجازه می دهد عرض حداکثر بلوک  محتوا را مشخص کنید. این حداکثر عرض در برگیرنده paddings, borders یا margins نیست. المانی که حداکثر عرض بر روی آن اعمال شده است هرگز نمی تواند  عریض تر از مقداری مشخص شده باشد حتی اگر  خصوصیت عرض بر روی مقدار بزرگ تر تنظیم شده باشد.

div {
    width: 300px;
    max-width: 200px;
}

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

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

خصوصیت min-width:

این خصوصیت به شما اجازه می دهد حداقل عرض بلوک محتوایی را مشخص نمایید. عرض حداقل در برگیرنده paddings, borders یا margins نیست.  المانی که min-width  بر روی آن اعمال شده است هرگز باریک تر از عرص حداقل مشخص شده نخواهد بود. به عنوان مثال اگر عرض بر روی 300 و عرض حداقل بر روی 400 پیکسل تنظیم شده باشد، عرض واقعی المان 400 پیکسل خواهد بود.

div {
    width: 300px;
    min-width: 400px;
}

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

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...