میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

طول و عرض در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش طول و عرض عناصر در CSS با من همراه باشید.

خصوصیات مربوط به ابعاد در CSS به شما این امکان را می دهد تا عرض (width) و ارتفاع (height) یک عنصر را کنترل کنید

خاصیت max-width برای تنظیم حداکثر عرض یک عنصر استفاده می شود.

 


مقادیر width و height در CSS

خصوصیات width و height می تواند مقادیر زیر را داشته باشند:

auto : این پیش فرض است. مرورگر ارتفاع و عرض را محاسبه می کند

length : ارتفاع / عرض را با px ، cm و غیره تعریف می کند.

% : ارتفاع / عرض زا با درصد تعیین می کند

initial : ارتفاع / عرض را به مقدار پیش فرض خود تنظیم می کند

inherit : ارتفاع / عرض از مقدار والد آن به ارث می رسد

 

 

 

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

یا

 

 

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
توجه: بخاطر داشته باشید که خصوصیات ارتفاع و عرض شامل padding ، borders و margins نمی باشد!  height/width ناحیه داخل borders ، padding و margins عنصر را تنظیم می کنند

 


max-width

از ویژگی max-width  برای تنظیم حداکثر عرض یک عنصر استفاده می شود.
 max-width را می توان در مقادیر طول ، مانند px ، cm و غیره یا در درصد (٪) بلوک حاوی مشخص کرد یا روی هیچ تنظیم کرد (این به طور پیش فرض است. به این معنی است که حداکثر عرض وجود ندارد).
توجه: مقدار ویژگیmax-width ویژگی width را از بین می برد.
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
این عنصر <div> دارای ارتفاع ۱۰۰ پیکسل و حداکثر عرض ۵۰۰ پیکسل است:

height : ارتفاع یک عنصر را تنظیم می کند

max-height : حداکثر ارتفاع یک عنصر را تنظیم می کند
max-width : حداکثر عرض یک عنصر را تنظیم می کند

min-height :حداقل ارتفاع یک عنصر را تنظیم می کند

min-width : حداقل عرض یک عنصر را تنظیم می کند

width : عرض یک عنصر را تنظیم می کند


امیدواریم آموزش طول و عرض در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

 

cssheight در CSSmax-height در cssmax-width در cssmin height در cssmin-width در cssw3schoolsw3schools فارسیwidth csswidth در cssآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسطول و عرض در CSSفارسی w3schoolsکاربرد max-width در cssکاربرد min-width در cssکتاب آموزش css فارسیویژگی max-height در css
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟