آموزش ویژگی height در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی height در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی height در CSS
با استفاده از ویژگی height در CSS میتوان اندازه ارتفاع یک عنصر را مشخص و یا تعریف کرد، که این اندازه میتواند توسط واحدهای اندازه گیری همچون پیکسل یا درصد و.. مشخص شوند.
در حالت عادی و پیش فرض اندازه ارتفاع یک عنصر خودش بصورت خودکار به نسبت محتوای داخل همان عنصر ایجاد میشود، این یعنی اگه براش Height هم تعریف نکنیم بازم خودش به نسبت محتوا درست میشه ولی اگه بخوایم هیچ محتوایی در عنصر وارد نکنیم ولی ارتفاع هم داشته باشه دیگه باید حتما از Height استفاده کنیم.
اگر از ویژگی های min-height و max-height استفاده کرده باشید دیگه ویژگی height عمل نخواهد کرد و مقدارش نادیده گرفته خواهد شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی height را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : اندازه ارتفاع باکس اول ۱۵۰ پیکسل و باکس دوم خودش خودکار به نسبت محتوا درست میشه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> p.t1{ background-color:#8AC007; height:150px; } p.t2{ background-color:#8AC007; height:auto; } </style> |
مثال شماره ۲ : وقتی محتوای داخل عنصر از اندازه ارتفاع عنصر بیشتر باشد، محتوا از عنصر میزنه بیرون و عملا بهش میگیم سَرریز ( Overflow ) شده. که برای حل این مشکل باید از ویژگی Overflow استفاده نماییم.
|
1 2 3 4 5 |
p.t2{ background-color:#8AC007; height:100px; overflow:auto; } |
مثال شماره ۳ : عدم استفاده از محتوا در داخل باکس ، و تنظیم اندازه عرض و ارتفاع ۱۰۰ پیکسل
|
1 2 3 4 5 |
p.t1{ background-color:#8AC007; width:100px; height:100px; } |
مثال شماره ۴ : پرچم کشور ایران – استفاده از واحد درصد (%)
یه باکس به عنوان ظرف اصلی یا پدر ایجاد میکنیم سپس بهش یه اندازه ارتفاع ( Height ) مشخصی میدیم، بعدش ۳ تا فرزند داخل این ظرف ایجاد میکنیم. ( فرزند اول برای رنگ سبز و فرزند دوم برای رنگ سفید و فرزند سوم برای رنگ قرمز )
اندازه ارتفاع عنصر پدر یا همون ظرف رو ۲۰۰ پیکسل مشخص کردیم بعدش گفتیم اندازه ارتفاع فرزند شماره ۱ و ۲ و ۳ باشه ۳۳ درصد ( یعنی ۳۳ درصد از اون ۲۰۰ پیکسل که در مجموع بشه ۱۰۰ درصد از ۲۰۰ پیکسل )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
div.pedar{ background-color:#8AC007; width:400px; height:200px; } div.pesar1{ background-color:green; border-bottom:3px dashed #fff; height:33.33%; } div.pesar2{ background-color:#fff; text-align:center; padding-top:20px; height:33.33%; } div.pesar3{ background-color:red; border-top:3px dashed #fff; height:33.33%; } |
Free-Learn
جدول مشخصات ویژگی height در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.height=”200px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی height در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| height | ۱٫۰ | ۱٫۰ | ۷٫۰ | ۱٫۰ | ۴٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
height: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی height در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | پیش فرض – بصورت خودکار به نسبت محتوا ایجاد میشود |
| length | استفاده از واحدهای اندازه گیری همچون px,em,% و… ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- تا زمانی که نمیخواید محدودیتی در اندازه ارتفاع یک عنصر ایجاد کنید، لازم نیست از این ویژگی استفاده کنید.
- استفاده از مقادیر منفی مثه ( ۱۰۰px- ) مجاز نیست و اعمال نخواهد شد.
- اندازه کلی و تمام شده ی یک عنصر علاوه بر محاسبه اندازه height ، اندازه ویژگی های Padding و Border نیز محاسبه میشوند. ( حتما آموزش ویژگی box-sizing را مشاهده نمایید )
