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

خاصية max-width للتحكم في أقصي عرض للعنصر بلغة CSSCSS Max Width

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

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

CSS Max Width خاصية max-width للتحكم في أقصي عرض للعنصر بلغة CSS

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


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


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

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

CSS max-width syntax

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

HTML 
max-width:value;

CSS max-width values

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

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

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

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

CSS max width none

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

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

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

يتم إحتساب طول العنصر بواسطة المتصفح تلقائياً مع إضافة خاصية height مع القيمة auto في لغة CSS.
جرّب بنفسك

CSS max width length

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

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

CSS max width percentage خاصية max-width مع القيمة percentage في لغة CSS

يتم إحتساب أقصي عرض للعنصر بالنسبة المئوية مع إضافة خاصية max-width مع القيمة percentage % في لغة CSS.
جرّب بنفسك

CSS max width percentage

خاصية max-width والقيمة percentage في لغة CSS.

HTML 
p 
{
  max-width:10%;
  border: 1px solid red;
}
جرّب بنفسك

مشاركة

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

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