درحال بارگذاری

آموزش CSS | قسمت یازدهم ( عرض و ارتفاع )

تاریخ: شنبه, 12 مهر 99

نویسنده: محمدرضا نامور... بازیدها: 592 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب


آموزش 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 عرض یک عنصر را تنظیم می کند

 

متشکرم از اینکه وقت گذاشتید و مارو تا آخر این مطلب همراهی کردید ؛ همچنین شما می توانید نظرات ، پیشنهادات و اطلاعات خود را در رابطه با این مطلب و موضوعات مربوط از طریق قسمت نظرات با ما و سایر بازدیدکنندگان در میان بگذارید.


نویسنده: محمدرضا نامور... بازیدها: 592 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

جستجو
کلاس برتر
ارائه دهنده بهترین و به روز ترین ویدیو های و مقالات آموزشی و همچنین مقالات مختلف در رابطه با تکنولوژی ،معماری ،مدیریت و سایر رشته های کاربردی.ما برای شما بهترین ها را میخواهیم.

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