آموزش height and width در css

0 دیدگاه 2,425 آموزش HTML5 و CSS3

آموزش height and width در css

فهرست موضوعات در این آموزش

بنام خدا سلام ,

در خدمت شما عزیزان هستم یا یکی دیگه از آموزش وب سایت پاسخ وردپرس .
توی این جلسه آموزش HTML5 و CSS3 میخواهیم طول (height ) و عرص ( width ) خدمت شما آموزش یدیم پس با من همراه باشید .

آموزش height در css

خاصیت height

توسط این خاصیت شما میتونید ارتفاع یک عنصر رو مشخص کنید .

آموزش عرض و طول در css

مقادیر خاصیت height

Auto : مرورگر بصورت خودکار ارتفاع رو تشخیص میده ، مقدار پیشفرض این خاصیت هست .
Lengh : شما میتونید از مقیاس های em , px , % برای تعیین ارتفاع استفاده کنید .
Initial : مقدار پیشفرض این خاصیت هست .
Inherit : در صورتی که عنصر فرزند این مقدار رو داشته باشه ، هر چی که مقدار عنصر والد باشه به ارث میبره .

div{
    width: 200px;
    height: 300px;
    background-color: #fff;
}

div{

width: 200px;

height: 300px;

background-color: #fff;

}

خاصیت min-height

توسط این خاصیت مشخص می کنید که حداقل ارتفاع عنصر چقدر باشه .

خاصیت max-height

توسط این عنصر مشخص می کنید که حداکثر ارتفاع عنصر چقدر باشه . اگر محتوای داخل عنصر بیشتر از این ارتفاع باشه خارج از کادر نمایش داده میشه چرا که عنصر بیشتر از حداکثری که براش تعیین شده ارتفاع نمیگیره .

به مثال زیر دقت نمایید:

.wrapper {
  height: 100%;     /* full height of the content box */
  max-height: 20em; /* requires an absolute value for height. */
}

.wrapper {
  height: 50px;
  max-height: 20px; /* Will be AT MOST 20px tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

.wrapper {

height: 100%; /* full height of the content box */

max-height: 20em; /* requires an absolute value for height. */

}

.wrapper {

height: 50px;

max-height: 20px; /* Will be AT MOST 20px tall : overrides height */

}

.wrapper {

min-height: 400px; /* overrides height and max-height */

height: 200px;

max-height: 300px;

}

این درصد با توجه به ارتفاع بلوک حاوی محاسبه می شود. اگر ارتفاع بلوک حاوی صراحت مشخص نشده باشد، مقدار درصد به عنوان هیچ کدام مورد بررسی قرار نمی گیرد. max-heightاموال جز به تمام عناصر اعمال خواهد شد.

خاصیت width

توسط این خاصیت شما میتونید عرض یک عنصر رو مشخص کنید .

مقادیر خاصیت width

Auto : مرورگر بصورت خودکار عرض رو تشخیص میده ، مقدار پیشفرض این خاصیت هست .
Lengh : شما میتونید از مقیاس های em , px , % برای تعیین عرض استفاده کنید .
Initial : مقدار پیشفرض این خاصیت هست .
Inherit : در صورتی که عنصر فرزند این مقدار رو داشته باشه ، هر چی که مقدار عنصر والد باشه به ارث میبره .

آموزش widht and height

خاصیت min-width

توسط این خاصیت حداقل عرض رو برای عنصر تعیین می کنید .

<div> Lorem ipsum tralala sit amet, consectetur adipisicing
  <p>
     Ut enim ad minim veniam, quis nostrud exercitation
     ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<div> Lorem ipsum tralala sit amet, consectetur adipisicing

<p>

Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</div>

خاصیت max-width

div {
  width: 250px;
  border: solid 1px red;
}

p {
  max-width: 60%;
  border: solid 1px blue;
}

div {

width: 250px;

border: solid 1px red;

}

p {

max-width: 60%;

border: solid 1px blue;

}

توسط این خاصیت حداکثر عرض رو برای عنصر تعیین می کنید .

نکته : برای کدنویسی های ریسپانسیو برای تصاویر شما max-width رو برابر ۱۰۰% قرار میدید ، در این صورت با کوچک و بزرگ شدن پنجره مرورگر ، تصویر هم تغییر سایز پیدا میکنه .

خوب دوستان این جلسه از آموزش های وب سایت پاسخ وردپرس هم به اتمام رسید ، اگر سوالی یا ابهامی براتون پیش اومد حتما مطرح کنید

آگه این آموزش را دوست داشتید به دوستان خود توی شبکه های اجتماعی به اشتراک بزاردید.

از ۱ تا ۵ امتیاز بدید.

آموزش height and width در css