ویژگی max-block-size CSS

تعریف و استفاده

max-block-size ویژگی‌ها اندازه بیشینه عنصر در مسیر بلوک را مشخص می‌کنند.

اگر اندازه محتوا در مسیر بلوک کوچکتر از مقدار بیشینه باشد، max-block-size مقدار ویژگی‌ها بی‌اثر است.

اگر اندازه محتوا در مسیر بلوک بزرگتر از مقدار بیشینه باشد، max-block-size مقدار ویژگی.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode مسیر بلوک را تعریف می‌کند که بر روی max-block-size نتیجه ویژگی‌ها. برای صفحات انگلیسی، مسیر بلوک به سمت پایین و مسیر درون‌تر از چپ به راست است.

CSS max-block-size ویژگی‌ها با ویژگی‌های CSS max-height و max-width بسیار مشابه، اما max-block-size ویژگی به مسیر بلوک وابسته است.

مثال

مثال 1

اندازه بیشینه عنصر <div> را در مسیر بلوک به 60 پیکسل تنظیم کنید:

div {
  max-block-size: 60px;
}

آزمایش کنید

مثال 2: نحوه نوشتن

عنصر <div> را تنظیم کنید writing-mode اگر مقدار ویژگی به vertical-lr تنظیم شود، مسیر بلوک از به سمت پایین به افقی تغییر می‌کند که این بر روی max-block-size روش کارکرد ویژگی:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

آزمایش کنید

مثال 3: Max-block-size در برابر Block-size

یک عنصر <div> را مشاهده کنید (block-size به اندازه 100px) و یک عنصر <div> دیگر (max-block-size واکنش‌های مختلف در تغییر اندازه محتوا (به اندازه 100px) در حالت‌های مختلف:

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

آزمایش کنید

نوشتار CSS

max-block-size: خودکار|طول|مقدار اولیه|ارث‌پذیری;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه مرورگر اولین هستند که این ویژگی را کامل پشتیبانی می‌کند.

صفحات مرتبط

ارجاع:ویژگی block-size CSS

ارجاع:ویژگی min-block-size CSS

ارجاع:ویژگی max-height CSS

ارجاع:ویژگی max-width CSS

ارجاع:ویژگی writing-mode CSS