کُد کمپ رایگان #C رو تو پیج اینستاگرام atriya.com دنبال کن!

آموزش طراحی سایت - max-width در CSS

در این بخش به آموزش width و max-width در CSS می پردازیم.

ویژگی width در CSS

با استفاده از این ویژگی می توانید عرض یک عنصر HTML را تعیین نمایید. دقت نمایید که عناصر inline-level عرض و ارتفاع نمی گیرند. و این ویژگی تنها برای عناصر block یا حتی inline-block اعمال می گردد.

همانطور که در مقاله قبلی نیز اشاره شد؛ یک عنصر block-level همیشه تمام عرض عنصر نگهدارنده خود را اشغال می کند و اجازه نمی دهد که عنصر دیگری در کنار آن قرار گیرد. تنظیم کردن width یک عنصر block-level از بزرگتر شدن ناخواسته ی آن جلوگیری می کند. در زمان هایی که عرض یک عنصر block-level کمتر از عرض عنصر نگهدارنده خود باشد، شما می توانید با استفاده از ویژگی margin و اختصاص مقدار auto به آن، عنصر موردنظر را بصورت افقی در مرکز نگهدارنده خود قرار داد. در این حالت عنصر عرض مشخص شده را در بر می گیرد و فضای باقی مانده بطور مساوی بین چپ و راست عنصر تقسیم می شود.

آموزش طراحی سایت

نکته: مشکل < div > بالا وقتی رخ می دهد که پنجره مرورگر از عرض عنصر کوچک تر باشد. در این صورت مرورگر یک اسکرول افقی به صفحه اضافه می کند. استفاده از max-width در css، در این موقعیت قدرت مدیریت مرورگر برای صفحه های کوچک را افزایش می دهد. این مورد وقتی که برای دستگاه های با صفحات نمایش کوچک سایت طراحی می کنیم حائز اهمیت می باشد.

در حقیقت با استفاده از ویژگی max-width می توان یک عرض حداکثر برای عناصر html مشخص کرد.

زمانی که نمی خواهیم عرض عنصری از یک مقدار مشخصی بیشتر شود می توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.

نکته: با استفاده از ویژگی min-width و  max-width می توان برای عرض یک عنصر محدوده تعیین کرد.

آموزش CSS

برای مقداردهی کردن این ویژگی ها شما می توانید هم از واحدهای اندازه گیری مطلق مانند (px) و همچنین از واحدهای اندازه گیری نسبی مانند (% rem em) نیز استفاده کنید.

آموزش طراحی سایت آموزش CSS آموزش max-width در CSS آموزش HTML آموزش برنامه نویسی

مقالات این دسته بندی