ویژگی width و height در CSS
با استفاده از ویژگی width، می توان عرض المان را مشخص کرد.
با استفاده از ویژگی height، می توان ارتفاع المان را مشخص کرد.
width: 100px;
height: 150px;ویژگی max-width و max-height در CSS
ویژگی max-width، حداکثر عرض ممکن برای المان را مشخص می کند.
ویژگی max-height، حداکثر ارتفاع ممکن برای المان را مشخص می کند.
مقدار ویژگی max-width و max-height به صورت پیش فرض، none است.
width: 80%;
max-width: 200px;نکته: مقدار width از max-width باید کوچک تر باشد.
نکته: مقدار height از max-height باید کوچک تر باشد.
چرا باید از max-wdith یا max-height استفاده می کنیم؟
اگر مقدار width به صورت نسبی (مثلا 90 درصد) و مقدار max-width به صورت قطعی (مثلا 100 پیکسل) وارد شود، در این موقعیت این امکان وجود دارد که 90 درصد از 100 پیکسل بیشتر شود. با وجود max-width از این امکان جلوگیری می کنیم.
width: 900px;
max-width: 150px;height: 900px;
max-height: 150px;ویژگی min-width و min-height در CSS
ویژگی min-width، حداقل عرض ممکن برای المان را مشخص می کند.
ویژگی min-height، حداقل ارتفاع ممکن برای المان را مشخص می کند.
مقدار ویژگی min-width و min-height به صورت پیش فرض، none است.
height: 20%;
min-height: 400px;نکته: در صورتی که از ویژگی height و min-height، همزمان استفاده شود، حتی اگر height کوچکتر باشد، باز هم، min-height اجرا می شود. در واقع min-height، حداقل ارتفاع ممکن را مشخص می کند.
width: 10%;
min-width: 300px;نکته: در صورتی که از ویژگی width و min-width، با هم استفاده شود. حتی اگر width کوچکتر باشد، باز هم، min-width اجرا می شود. در واقع min-width، حداقل عرض ممکن را مشخص می کند.
height: 10%;
min-height: 300px;تفاوت width با max-width و min-width در CSS
ویژگی width، عرض المان را مشخص می کند.
ویژگی max-width، حداکثر عرض ممکن را مشخص می کند.
ویژگی min-width، حداقل عرض ممکن را مشخص می کند.
به طور مثال شما width یک المان را 100% و max-width را 500px در نظر می گیرید.
چون واحد درصد نسبت به عرض دستگاه تغییر می کند، در دستگاه های کوچک چون 100% کمتر از 500px می باشد، به صورت کامل نمایش داده می شود. ولی در دستگاه های بزرگ تر اگر 100% از 500px بزرگ تر باشد، عرض المان، نمی تواند از 500px بزرگ تر شود.
در رابطه با min-width هم این مبحث صدق می کند.
خلاصه درس
در این درس با ویژگی width و ویژگی height در CSS:
- مقدار کمینه (min) width و height
- مقدار بیشینه (max) width و height
آشنا شدیم.
احسان اسلامی
