قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / اندازه عناصر در CSS

اندازه عناصر در CSS

اندازه عناصر در CSSReviewed by سالار on Apr 2Rating: 5.0

در CSS مجموعه خواصی برای تعيين اندازه عناصر وجود دارد . در اين قسمت به معرفی خواصی می پردازيم که به ما امکان کنترل اندازه عرض و طولی عناصر در صفحه را می دهند .
خواص ارائه شده در اين قسمت در ليست زير آمده اند .

height
max-height
min-height
width
max-width
min-width

خواص تعيين اندازه در CSS

نام خاصيت نوع خاصيت شرح
height auto
length
درصد %
توسط اين خاصيت ، به يکی از روش های زير ارتفاع عنصر را تعيين می کنيم :
– auto : در اين حالت مرورگر به صورت اتوماتيک ارتفاع عنصر را تنظيم می کند .
– length : در اين حالت ميزان ارتفاع عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان ارتفاع در نظر گرفته می شود .
max-height none
length
درصد %
حداکثر ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
– none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود .
– length : در اين حالت حداکثر ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان حداکثر ارتفاع در نظر گرفته می شود .
min-height none
length
درصد %
حداقل ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
– none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود .
– length : در اين حالت حداقل ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان حداقل ارتفاع در نظر گرفته می شود .
width auto
length
درصد %
توسط اين خاصيت ، به يکی از روش های زير عرض عنصر را تعيين می کنيم :
– auto : در اين حالت مرورگر به صورت اتوماتيک عرض عنصر را تنظيم می کند .
– length : در اين حالت ميزان عرض عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان عرض در نظر گرفته می شود .
max-width none
length
درصد %
حداکثر عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
– none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود .
– length : در اين حالت حداکثر عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان حداکثر عرض در نظر گرفته می شود .
min-width none
length
درصد %
حداقل عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند :
– none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود .
– length : در اين حالت حداقل عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم .
– درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان حداقل عرض در نظر گرفته می شود .

مثال : در مثال زير برای جدول و خانه های آن ارتفاع و عرض تعيين شده است :

Example
نکته : در خانه های جدولی که در يک سطر يا ستون هستند ، چنانچه برای خانه ها ارتفاع يا عرض های متفاوت تعيين شود ، همواره ارتفاع يا عرض ستون يا سطر را عنصر با ارتفاع يا عرض بيشتر تعيين می کند و باعث تغيير اندازه ستون های ديگر می شود .
برای نمونه در مثال زير ارتفاع خانه Ce11 1 برابر ۴۰px و خانه Cell 2 برابر ۱۰۰px تعيين شده و می بينيم که ارتفاع سطر برابر ارتفاع خانه Cell 2 تنظيم شده و باعث تغيير ارتفاع خانه Cell 1 شده است .
< table style=”border: solid 2px blue ; width : 600px ; height : 250px ” >
< tr >
    < td style=”border: solid 2px green; width: 250px; height: 40px >
Cell 1
< /td >

    < td style=”border: dashed 2px blue; width: 350px; height: 100px >
Cell 2
< /td >

< /tr >
< tr >
    < td style=”border: solid 2px red; width: 600px; height: 150px ; text-align : center ” colspan = “2” >
Cell 3
< /td >

< /tr >
< /table >
کد
Cell 1 cell 2
Cell 3
خروجی

مطلب پیشنهادی

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )Reviewed by سالار on …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید