این آموزش در تاریخ ۱۴۰۰/۱۱/۰۵ آپدیت شده است.
آموزش ویژگی height در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی height در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی height در CSS
با استفاده از ویژگی height در CSS میتوان اندازه ارتفاع یک عنصر را مشخص و یا تعریف کرد، که این اندازه میتواند توسط واحدهای اندازه گیری همچون پیکسل یا درصد و.. مشخص شوند.
در حالت عادی و پیش فرض اندازه ارتفاع یک عنصر خودش بصورت خودکار به نسبت محتوای داخل همان عنصر ایجاد میشود، این یعنی اگه براش Height هم تعریف نکنیم بازم خودش به نسبت محتوا درست میشه ولی اگه بخوایم هیچ محتوایی در عنصر وارد نکنیم ولی ارتفاع هم داشته باشه دیگه باید حتما از Height استفاده کنیم.
اگر از ویژگی های min-height و max-height استفاده کرده باشید دیگه ویژگی height عمل نخواهد کرد و مقدارش نادیده گرفته خواهد شد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی height را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : مشخص کردن اندازه عرض ( width ) و ارتفاع ( height )
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-color:#2196f3; width:200px; height:70px; } </style> |
مثال شماره ۲ : باکس اولی رو براش ارتفاع تنظیم کردیم و باکس دومی خودش خودکار به نسبت محتواش تنظیم میشه
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .Box-1{ height: 100px; } .Box-2{ height: auto; } </style> |
مثال شماره ۳ : وقتی محتوای داخل تگ از اندازه ارتفاع خوده تگ بیشتر باشه، محتوا از تگ میزنه بیرون و عملا بهش میگیم سَرریز ( Overflow ) شده. که برای حل این مشکل باید از ویژگی Overflow استفاده نماییم.
|
1 2 3 4 |
.Box-2{ height: 100px; overflow: auto; } |
مثال شماره ۴ : پرچم کشور ایران – استفاده از واحد درصد (%)
یه باکس به عنوان ظرف اصلی یا پدر ایجاد میکنیم سپس بهش یه اندازه ارتفاع ( Height ) مشخصی میدیم، بعدش ۳ تا فرزند داخل این ظرف ایجاد میکنیم. ( فرزند اول برای رنگ سبز و فرزند دوم برای رنگ سفید و فرزند سوم برای رنگ قرمز )
اندازه ارتفاع عنصر پدر یا همون ظرف رو ۲۰۰ پیکسل مشخص کردیم بعدش گفتیم اندازه ارتفاع فرزند شماره ۱ و ۲ و ۳ باشه ۳۳ درصد ( یعنی ۳۳ درصد از اون ۲۰۰ پیکسل که در مجموع بشه ۱۰۰ درصد از ۲۰۰ پیکسل )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.Pedar{ height: 200px; } .Pesar-1{ height: 33.33%; } .Pesar-2{ height: 33.33%; } .Pesar-3{ height: 33.33%; } |
Free-Learn
جدول مشخصات ویژگی height در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.height=”200px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی height در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| height | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
height: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی height در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – بصورت خودکار به نسبت محتوا ایجاد میشود |
| length | استفاده از واحدهای اندازه گیری همچون px و % و… ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- تا زمانی که نمیخواید محدودیتی در اندازه ارتفاع یک عنصر ایجاد کنید، لازم نیست از این ویژگی استفاده کنید.
- استفاده از مقادیر منفی مثه ( ۱۰۰px- ) مجاز نیست و اعمال نخواهد شد.
- اگه همزمان از ویژگی های Padding و Border و Height استفاده کرده باشید، اندازه ویژگی های Padding و Border بروی اندازه ارتفاع تاثیر میزاند، برای جلوگیری از اینکار باید از ویژگی box-sizing استفاده کرد
