به عنوان مثال در مورد بحث ارتفاع یا عرض خاصیت min-height یا max-height را با وجود خود height در نظر بگیرید
چه اهمیتی دارد که به ارتفاع میزان حداقل بدهیم یا حد اکثر آن را تعریف کنیم
ابتدا یک نقل قول و تعریف از این دو خاصیت رو بخونید :
خاصیت min-height و max-height
در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
اما دادن حداقل میزان در سایت های دینامیک خیلی به درد خواهد خورد
چرا که شما از طول و عرض محیطی که برای یک قسمت قابل تغییر در نظر گرفته اید بی خبر هستید
ممکن است شما به قسمتی که قرار هست متنی در آن نمایش داده شود ارتفاعی ثبت کرده اید ولی متن وارد شده آنقدر طولانی باشد که نیاز به ارتفاع بیشتر داشته باشد در این صورت محیط نمایش به هم خورده خواهد شد
به این تصویر دقت کنید :
همانگونه که مشاهده میکنید منوی شماره 2 که با نام test2 نوشته شده است با توجه به اینکه از عرض تعریف شده کاراکتر بیشتری دارد بر روی خط جدید و شماره ستون سوم و نوشته ی test3 ظاهر شده است
علت این اشکلال این هست که مقدار ارتفاع یعنی height برای این قسمت تعریف شده و دیگر خط شماره دو نمیتواند بیشتر از آن به خود ارتفاع بدهد و در نتیجه بر روی خط 3 می افتد
اما اگر به جای height از خاصیت min-height در این مثال استفاده کنیم تقسیم بندی ما اجازه خواهد داشت بر ارتفاع خود بیافزاید و به این صورت نمایش داده خواهد شد :
مشاهده میفرمائید که خط دوم به دلیل وجود کاراکتر های بیشتر نسبت به بقیه ستون ها ارتفاع بیشتری به خود اختصاص داده است .
هیچ نظری موجود نیست:
ارسال یک نظر