با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش تنظیمات عرض و ارتفاع عناصر html در css ، بپردازیم. تنظیم کردن عرض (width) و ارتفاع (height) عناصر html، می تواند بطور مستقیم و بدون استفاده از css در داخل تگ های html اعمال شود. اما css اختیارات و جزئیات بیشتری را برای تنظیم کردن عرض (width) و ارتفاع (height) عناصر html ، در اختیار کاربران قرار می دهد.
در پست های قبلی، آموزش های کاربردی در مورد مباحث کار با فضای بین عناصر html در css و مدیریت فضای خالی داخل عناصر html در css در این سایت ارائه گردیده است.
همچنین پست آموزشی ساختار کد نویسی css را جهت آشنایی بهتر با css، برای کاربرانی که با css آشنایی کم تری دارند، قرار داده ایم. در این پست آموزشی نیز به بررسی چگونگی تنظیمات عرض و ارتفاع عناصر html در css، می پردازیم.
نمونه ای از تعیین عرض و ارتفاع عناصر html در css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <style> div { width: 100%; border: 1px solid #4CAF50; } </style> </head> <body> <div>This element has a width of 100%.</div> </body> </html> |
ویژگی height و width در css ، برای تنظیم ارتفاع و عرض یک عنصر html بکار می رود. ارتفاع و عرض یک عنصر در css می تواند در حالت خودکار (auto) تنظیم شود. (این ویژگی پیش فرض است، به این معنا که مرورگر عرض و ارتفاع را محاسبه می کند) و همچنین می توانید اندازه ی عرض و ارتفاع را بر حسب واحد های px, cm, etc و یا بر حسب درصد (%) تعیین کنید.
مثال:
1 2 3 4 5 | div { height: 200px; width: 50%; background-color: powderblue; } |
همچنین می توانید مقدار width و height را با یک واحد px تعیین کنید:
1 2 3 4 5 | div { height: 100px; width: 500px; background-color: powderblue; } |
در css با استفاده از ویژگی max-width ، می توانید حداکثر اندازه عرض یک عنصر را تعیین کنید. مقدار این ویژگی نیز بر حسب واحد های px, cm, etc و یا بر حسب درصد (%) تعیین می گردد.
ویژگی max-width زمانی کارایی دارد که عرض پنجره مرورگر کوچکتر از عرض یک عنصر مانند <div> باشد. در این حالت مرورگر یک اسکرول افقی را به صفحه اضافه می کند. max-width وضعیت پنجره های کوچک مرورگر را بهبود می بخشد.
در مثال زیر یک تگ <div> با ارتفاع ۱۰۰ پیکسل و با max-width با مقدار ۵۰۰ پیکسل ، تعریف شده است.
1 2 3 4 5 | div { max-width: 500px; height: 100px; background-color: powderblue; } |
خصوصیت | توضیحات |
---|---|
height | تنظیم ارتفاع یک عنصر HTML |
max-height | تنظیم حداکثر ارتفاع یک عنصر HTML |
max-width | تنظیم حداکثر عرض یک عنصر HTML |
min-height | تنظیم حداقل ارتفاع یک عنصر HTML |
min-width | تنظیم حداقل عرض یک عنصر HTML |
width | تنظیم عرض یک عنصر HTML |
عناصر HTML معمولا ویژگی های width و height (عرض و ارتفاع) را برای تنظیم ابعاد خود دارند، اما این ویژگی ها بسیار محدود است، با فراگیری نحوه ی تنظیمات عرض و ارتفاع عناصر html در css می توانید با دست بازتری ابعاد عناصر html را تنظیم کنید.
mohsen11astane
مرسی
MATIN GVR
برای من کار نمیکنه فقط جاشو جابجا میکنه چیکار کنم
نمیگم
بپر بالا بیا پایین