انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 51
دورة لغة CSS

خاصية max-height للتحكم في أقصي طول للعنصر بلغة CSSCSS Max Height

ستتعلم في هذا الدرس التحكم في أقصي طول لعناصر HTML باستخدام خاصية max-height في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,704
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Max Height خاصية max-height للتحكم في أقصي طول للعنصر بلغة CSS

تستخدم خاصية max-height في ضبط + التحكم في أقصي طول ممكن لعناصر HTML علي المتُصفح بلغة CSS, لو زاد حجم محتوي العنصر علي أقصي طول للعنصر max-wdith بشكل تلقائي سوف يطفح المحتوي خارج العنصر ولكن عن طريق خاصية overflow يممكن معالجة هذا الأمر.

  • لو المحتوي أقل من طول العنصر فأن خاصية max-height لا تؤثر علي العنصر ويكون ليس لها وظيفة في هذة الحالة.
  • في حال أن للعنصر طول بخاصية height أكبر من خاصية max-height فأن الطول الُمحدد بخاصية max-height يكون هو الزي له تأثير علي العنصر ويلغي الطول المٌحدد بخاصية height.


قيم خاصية max-height في لغة CSS:

  • none هي الوضع الأفتراضي وأن العنصر ليس له حد أقصي للطول ويعمل فقط بخاصية height.
  • length ضبط أقصي طول للعنصر  بوحدات مختلفة مثل px,cm,em,rem.
  • percentage ضبط أقصي طول للعنصر بالنسبة المئوية % علي حسب العنصر الأب parent.

CSS max-height syntax

طريقة كتابة خاصية max-height في لغة CSS.

HTML 
max-height:value;

CSS max-height values

قيم خاصية max-height في لغة CSS.

HTML 
max-height:none|length|initial|inherit;

CSS max-height none خاصية max-height مع القيمة none في لغة CSS

في حال أن أقصي طول للعنصر مُحدد بقيمة none مع خاصية max-height في لغة CSS فأن العنصر يكون ليس له حد أقصي مطلقاًُ ويتم إحتساب الطول علي حسب خاصية height.
جرّب بنفسك

CSS max height none

خاصية max-height والقيمة none في لغة CSS.

HTML 
p 
{
  max-height:none;
  height:100px;
  border: 1px solid red;
}
جرّب بنفسك

CSS max-height length خاصية max-height مع القيمة length في لغة CSS

يطفح محتوي العنصر خارج حدود العنصر في حال أن المحتوي أكبر من القيمة المُحددو داخل خاصية max-height في لغة CSS.
جرّب بنفسك

CSS max height length

خاصية max-height والقيمة length في لغة CSS.

HTML 
.max
{
  max-height:100px;
  width:200px;
  border: 1px solid red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…