آموزش css قسمت نهم – (Height & Width)
سلام
با قسمت نهم از آموزش css در خدمتتون هستیم، در دو قسمت قبلی دو مفهوم مهم Margin و Padding را گفتیم، حال در این قسمت می پردازیم به دو خاصیت height(ارتفا) و width(عرض)، در ادامه همراه بپرسم باشید.
آموزش:
توسط خاصیت height میتوانیم ارتفاء یک عنصر و توسط width می توانیم عرض یک عنصر را تعیین کنیم.
خصوصیات height و width را میتوانیم توسط واحدهای اندازه گیری نظیر px, cm, %, em و … مشخص کنیم، که از بین واحدهای اندازه گیری px, em و % رایج هستند که اکثر طراحان وب از همین سه واحد اندازه گیری استفاده می کنند، واحد اندازه گیری px اگر استفاده کنید میتوانید هر عددی را قرار دهید
در واحد اندازه گیری px میتوانید هر عددی را قرار دهید، ولی برای واحد اندازه گیری % چون واحد بر اساس درصد است باید عددی ببین 1 تا 100 را انتخاب کنید.
- مثال زیر را در نظر بگیرید، در این مثال یک <div> تعریف کردیم و ارتفاع و عرض را برابر 200px گذاشتیم:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 200px;
background-color: powderblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- حال همین مثال بالا را با واحد اندازه گیری % انجام میدهیم(مقداری بین 1 تا 100 قرار میدیم)، عرض را برابر %50 قرار میدهیم.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 260px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
سوال: حال فرق بین px و % در چیست؟
جواب: واحد اندازه گیری px که مخفف پیکسل است، بر اساس پیکسل اندازه گیری می شود و حد و مرزی ندارد، ولی واحد اندازه گیری % نسبت به عرض و ارتفاع صفحه نمایش تعیین می شود، برای مثال اگر شما عرض یک عنصر را %50 در نظر بگیرید، نسبت به اندازه صفحه نمایش عنصر 50 درصد از صفحه نمایش را در بر میگیرد(در موبایل، تبلت، صفحه نمایش های بزرگ و کوچک فرقی نمیکند).
- max-height, max-width و min-height و min-width
توسط max-width و max-height می توانیم حداکثر ارتفا و عرض یک عنصر را تعریف کنیم و همچنین توسط main-width و min-height حداقل ارتفاع و عرض یک عنصر را تعریف کنیم.
تنظیم این خصوصیات باعث میشود، عرض و ارتفاع عناصر از مقداری که تعیین کردید، کمتر یا بیشتر نشود.
- در مثال زیر بجای به تگ div مقدار max-width دادیم:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- خصوصیات مربوط به ابعاد
در جدول زیر خصوصیات مربوط به ابعاد آورده شده است.
|
خصوصیت |
توضیح |
|
height |
تنظیم ارتفاع یک عنصر |
|
max-height |
تنظیم حداکثر ارتفاع یک عنصر |
|
max-width |
تنظیم حداکثر عرض یک عنصر |
|
min-height |
تنظیم حداقل ارتفاع یک عنصر |
|
min-width |
تنظیم حداقل عرض یک عنصر |
|
width |
تنظیم عرض یک عنصر |
این قسمت از آموزش css نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید