آموزش ویژگی height در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی height در CSS با من همراه باشید.

آموزش ویژگی height در CSS

Free-Learn

ویژگی height در CSS

با استفاده از ویژگی height در CSS میتوان اندازه ارتفاع یک عنصر را مشخص و یا تعریف کرد، که این اندازه میتواند توسط واحدهای اندازه گیری همچون پیکسل یا درصد و.. مشخص شوند.

در حالت عادی و پیش فرض اندازه ارتفاع یک عنصر خودش بصورت خودکار به نسبت محتوای داخل همان عنصر ایجاد میشود، این یعنی اگه براش Height هم تعریف نکنیم بازم خودش به نسبت محتوا درست میشه ولی اگه بخوایم هیچ محتوایی در عنصر وارد نکنیم ولی ارتفاع هم داشته باشه دیگه باید حتما از Height استفاده کنیم.

اگر از ویژگی های min-height و max-height استفاده کرده باشید دیگه ویژگی height عمل نخواهد کرد و مقدارش نادیده گرفته خواهد شد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی height را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : اندازه ارتفاع باکس اول ۱۵۰ پیکسل و باکس دوم خودش خودکار به نسبت محتوا درست میشه

امتحان کنید

مثال شماره ۲ : وقتی محتوای داخل عنصر از اندازه ارتفاع عنصر بیشتر باشد، محتوا از عنصر میزنه بیرون و عملا بهش میگیم سَرریز ( Overflow ) شده. که برای حل این مشکل باید از ویژگی Overflow استفاده نماییم.

امتحان کنید

مثال شماره ۳ : عدم استفاده از محتوا در داخل باکس ، و تنظیم اندازه عرض و ارتفاع ۱۰۰ پیکسل

امتحان کنید

مثال شماره ۴ : پرچم کشور ایران – استفاده از واحد درصد (%)

یه باکس به عنوان ظرف اصلی یا پدر ایجاد میکنیم سپس بهش یه اندازه ارتفاع ( Height ) مشخصی میدیم، بعدش ۳ تا فرزند داخل این ظرف ایجاد میکنیم. ( فرزند اول برای رنگ سبز و فرزند دوم برای رنگ سفید و فرزند سوم برای رنگ قرمز )

اندازه ارتفاع عنصر پدر یا همون ظرف رو ۲۰۰ پیکسل مشخص کردیم بعدش گفتیم اندازه ارتفاع فرزند شماره ۱ و ۲ و ۳ باشه ۳۳ درصد ( یعنی ۳۳ درصد از اون ۲۰۰ پیکسل که در مجموع بشه ۱۰۰ درصد از ۲۰۰ پیکسل )

امتحان کنید

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 بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی height در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – بصورت خودکار به نسبت محتوا ایجاد میشود
length استفاده از واحدهای اندازه گیری همچون px,em,% و…
( آموزش واحدهای اندازه گیری در CSS )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • تا زمانی که نمیخواید محدودیتی در اندازه ارتفاع یک عنصر ایجاد کنید، لازم نیست از این ویژگی استفاده کنید.
  • استفاده از مقادیر منفی مثه ( ۱۰۰px- ) مجاز نیست و اعمال نخواهد شد.
  • اندازه کلی و تمام شده ی یک عنصر علاوه بر محاسبه اندازه height ، اندازه ویژگی های Padding و Border نیز محاسبه میشوند. ( حتما آموزش ویژگی box-sizing را مشاهده نمایید )

Free-Learn

دریافت PDF یا پرینت این مطلب