آموزش ویژگی height در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی height در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی height در CSS
با استفاده از ویژگی height
در CSS میتوان اندازه ارتفاع یک عنصر را مشخص و یا تعریف کرد، که این اندازه میتواند توسط واحدهای اندازه گیری همچون پیکسل یا درصد و.. مشخص شوند.
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 را مشاهده نمایید )