ویژگیهای height و width در CSS برای تعیین ارتفاع و عرض یک عنصر استفاده میشوند.
ویژگی max-width برای مشخصکردن حداکثر عرض مجاز یک عنصر بهکار میرود.
این عنصر دارای ارتفاع ۷۰ پیکسل و عرض ۱۰۰٪ است.
ویژگیهای height و width ارتفاع و عرض ناحیه محتوای عنصر را مشخص میکنند.
توجه: این ویژگیها شامل padding، border یا margin نمیشوند. آنها فقط ناحیه داخلی عنصر را تحت تأثیر قرار میدهند.
ویژگیهای height و width میتوانند مقادیر زیر را داشته باشند:
auto — مقدار پیشفرض؛ مرورگر بهصورت خودکار اندازه را محاسبه میکند
length — تعیین اندازه با واحدهایی مانند px، cm، em و غیره
% — تعیین اندازه بهصورت درصدی از بلوک والد
initial — بازگرداندن مقدار به حالت پیشفرض
inherit — مقدار از عنصر والد به ارث برده میشود
<div>:div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
یادآوری: ویژگیهای
heightوwidthفقط ناحیه محتوای عنصر را تحت تأثیر قرار میدهند و شامل padding، border یا margin نمیشوند.
ویژگی max-width حداکثر عرض مجاز برای یک عنصر را مشخص میکند. این ویژگی مانع از آن میشود که عرض عنصر از مقدار تعیینشده بیشتر شود.
مقادیر قابلاستفاده برای max-width عبارتاند از:
length — تعیین حداکثر عرض با واحدهایی مانند px، cm و غیره
% — تعیین حداکثر عرض بهصورت درصدی از بلوک والد
none — مقدار پیشفرض؛ یعنی هیچ محدودیتی برای عرض وجود ندارد
یکی از مشکلات رایج هنگام استفاده از
widthاین است که اگر عرض مرورگر کمتر از عرض عنصر باشد، مرورگر یک نوار اسکرول افقی به صفحه اضافه میکند. استفاده ازmax-widthباعث بهبود نمایش در پنجرههای کوچکتر میشود.
width و max-width:.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
اگر مرورگر را کوچکتر از ۵۰۰ پیکسل کنید، عنصر
.div1بهدرستی واکنشگرا باقی میماند، اما.div2باعث ایجاد اسکرول افقی میشود.
اگر برای یک عنصر هم width و هم max-width تعریف شود، و مقدار width بیشتر از max-width باشد، مقدار max-width اعمال خواهد شد.
.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
در این مثال، عرض عنصر در حالت عادی برابر با ۱۰۰٪ است، اما هرگز از ۹۰۰ پیکسل بیشتر نخواهد شد.
تنظیم ارتفاع و عرض عناصر مختلف
تنظیم ارتفاع و عرض تصویر با استفاده از درصد
تنظیم حداقل و حداکثر عرض یک عنصر با واحد پیکسل
تنظیم حداقل و حداکثر ارتفاع یک عنصر با واحد پیکسل
| ویژگی | توضیح |
|---|---|
height | تعیین ارتفاع عنصر |
width | تعیین عرض عنصر |
max-width | تعیین حداکثر عرض مجاز |
min-width | تعیین حداقل عرض مجاز |
max-height | تعیین حداکثر ارتفاع مجاز |
min-height | تعیین حداقل ارتفاع مجاز |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses