عرض و ارتفاع در CSS
یادگیری CSSتنظیم عرض و ارتفاع
صفات height و width برای تنظیم عرض و ارتفاع عناصر به کار می رود. صفات height و width می توانند بر روی auto تنظیم شوند (پیش فرض مرورگر : خود مرورگر عرض و ارتفاع را محاسبه می کند). یا با مقادیر مشخصی از px ، cm و ... و یا با درصدی از عرض بلوک نگه دارنده عنصر تعریف شوند.
این عنصر دارای 200px ارتفاع و 50% عرض می باشد.
مثال :
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
مشاهده مثالمثال :
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
مشاهده مثالنکته ! صفات height و width نمی توانند حاوی padding ، margin یا border باشند؛ این دو صفت عرض و ارتفاع داخل این 3 مورد را تنظیم می کنند.
تنظیم max-width
صفت max-width برای تعیین حداکثر عرض یک عنصر به کار می رود. این صفت می تواند در مقادیر مشخصی از px ، cm و سایر واحد های طولی تعریف شود و یا درصدی از بلوک نگه دارنده عنصر باشد. حتی می توان آن را بر روی مقدار none تنظیم کرد (این مقدار پیش فرض است . یعنی عرض حداکثری وجود نداشته باشد).
مشکل در مثال قبلی این است که اگر پنجره مرورگر را کمتر از 500 پیکسل قرار دهیم ، یک نوار اسکرول افقی نمایش داده می شود و باید برای مشاهده ادامه div موجود در آن ، اسکرول کنیم. استفاده از max-width این امکان را برای مرورگر فراهم می کند تا در صفحات کوچکتر ، صفحه را بهینه نمایش دهد.
نکته ! مقدار max-width بر مقدار width غلبه می کند.
در مثال زیر یک عنصر div با ارتفاع 100 پیکسل و عرض حداکثری 500 پیکسل نمایش داده شده است.
مثال :
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
مشاهده مثال
نظر شما
>