CSS max-block-size خاصية

الصفحة السابقة نوع الكمامة
الصفحة التالية max-height

التعريف والاستخدام

max-block-size الخاصية تحدد الأقصى لحجم العنصر في اتجاه البlocks.

إذا كان حجم المحتوى أصغر من القيمة القصوى، فإن max-block-size قيمة الخاصية لا تعمل.

إذا كان حجم المحتوى أكبر من القيمة القصوى، يتم تطبيق max-block-size قيمة الخاصية.

ملاحظة:خصائص CSS ذات الصلة writing-mode يحدد اتجاه البlocks، مما يؤثر على max-block-size نتائج الخاصية. للصفحات باللغة الإنجليزية، اتجاه البlocks هو أسفل، وإتجاه العنصر هو من اليسار إلى اليمين.

CSS max-block-size خصائص CSS max-height و max-width مماثلة جدًا، لكن max-block-size الخاصية تعتمد على اتجاه البlocks.

مثال

مثال 1

ضع أقصى حجم العنصر <div> في اتجاه البlocks إلى 60 بكسل:

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

جرب بنفسك

مثال 2: نمط الكتابة

ضع <div> الخاصية writing-mode إذا تم تعيين قيمة الخاصية إلى vertical-lr، فإن اتجاه البlocks سيكون من أسفل إلى أعلى، مما يؤثر على max-block-size طريقة عمل الخاصية:

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

جرب بنفسك

مثال 3: Max-block-size vs Block-size

مراقبة عنصر <div> (block-size 100px) و عنصر <div> آخر (max-block-size ملاحظة رد الفعل المختلفة عند تغيير حجم المحتوى (100px):

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

جرب بنفسك

صيغة CSS

max-block-size: auto|length|initial|inherit;

قيمة الخاصية

القيمة	الوصف
auto	افتراضي. القيمة الافتراضية للـ max-block-size للعنصر.
length	تحديد max-block-size، وحدة القياس px، pt، cm وما إلى ذلك. انظر:وحدات CSS.
%	تحديد النسبة المئوية للابعاد على المحور المماثل للعنصر الأم.
initial	ضع هذا الخاصية في قيمتها الافتراضية. انظر initial.
inherit	يرث هذا الخاصية من عنصر الأب. انظر inherit.

تفاصيل التقنية

القيمة الافتراضية:	auto
التوريث:	لا
تحريكات تصنع:	يدعم. انظر:خصائص التحرك.
الإصدار:	CSS3
جافا سكربت الصيغة:	object.style.maxBlockSize="60px"