آموزش CSS | قسمت یازدهم ( عرض و ارتفاع )
آموزش CSS : سلام به همراهان همیشگی کلاس برتر ، در این قسمت از سری مقاله های آموزش CSS قصد بررسی و معرفی مقادیر مشخص کننده عرض و ارتفاع یک عنصر در صفحه وب را داریم ؛ ما رو تا آخر این مطلب همراهی کنید .
مقدمه
همونطور که از نام این مقادیر پیداست از height و width برای تنظیم ارتفاع و عرض یک عنصر استفاده می شود.
خصوصیات ارتفاع و عرض شامل حاشیه گذاری ، در قسمت پدینگ و مارجین نیستند . بلکه ارتفاع و عرض ناحیه داخلی بالشتک عنصر را تنظیم می کند.
مقادیر ارتفاع و عرض در CSS
خصوصیات height و width مقادیر زیر را هم شامل میشوند :
auto– این مقدار در حالت پیش فرض قرار داده شده است ؛ بر اساس داده های مرورگر ارتفاع و عرض محاسبه می شود .length– ارتفاع وعرض را با px ، cm و ... تعریف می کند .%- ارتفاع و عرض را از درصدِ ، بلوکه ی اصلی مشخص می کند .initial- ارتفاع و عرض را به مقدار پیش فرض خود تنظیم می کندinherit- ارتفاع و عرض از مقدار والد آن به ارث می برد .
مثالها
این عنصر دارای ارتفاع 200 پیکسل
و عرض 50٪ است
ارتفاع و عرض عنصر <div> را تعریف کنید :
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
این عنصر دارای ارتفاع 100 پیکسل
و عرض 500 پیکسل است.
ارتفاع و عرض عنصر <div> دیگر را نیز تعریف کنید :
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
تنظیم max-width ( حداکثر عرض )
از ویژگی max-width برای تنظیم حداکثر عرض یک عنصر در صفحه وب استفاده می شود .
max-width را می توان در مقادیر طول ، مانند px ، cm و ... یا در درصد ( ٪ ) بلوکه اصلی مشخص کرد یا روی none ( هیچ ) تنظیم کرد ( به طور پیش فرض است و به معنی این است که حداکثر عرض وجود ندارد ).
مشکل در <div> مثال بالا وقتی رخ می دهد که پنجره مرورگر کوچکتر از عرض عنصر ( 500 پیکسل ) باشد ؛ سپس مرورگر یک نوار پیمایشی افقی به صفحه اضافه می کند .
در این شرایط استفاده از max-width به جای مقدار معین ، باعث بهبود عملکرد مرورگر در پنجره های کوچک می شود .
نکته : پنجره مرورگر را به پهنای کمتر از 500 پیکسل بکشید تا تفاوت بین دو مثال بالا و پایین را مشاهده کنید !
این عنصر دارای ارتفاع 100 پیکسل
و حداکثر عرض 500 پیکسل است.
توجه: مقدار ویژگی max-width ویژگی width را از بین می برد .
این عنصر <div> دارای ارتفاع 100 پیکسل و حداکثر عرض 500 پیکسل است :
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
تمام خصوصیات ابعاد CSS
| ویژگی | توضیح |
| height | ارتفاع یک عنصر را تنظیم می کند |
| max-height | حداکثر ارتفاع یک عنصر را تنظیم می کند |
| max-width | حداکثر عرض یک عنصر را تنظیم می کند |
| min-height | حداقل ارتفاع یک عنصر را تنظیم می کند |
| min-width | حداقل عرض یک عنصر را تنظیم می کند |
| width | عرض یک عنصر را تنظیم می کند |
متشکرم از اینکه وقت گذاشتید و مارو تا آخر این مطلب همراهی کردید ؛ همچنین شما می توانید نظرات ، پیشنهادات و اطلاعات خود را در رابطه با این مطلب و موضوعات مربوط از طریق قسمت نظرات با ما و سایر بازدیدکنندگان در میان بگذارید.