|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

عرض و ارتفاع در 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;
}
مشاهده مثال

نظر شما

>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد