CSS Max Width
خاصية max-width للتحكم في أقصي عرض للعنصر بلغة CSS
ستتعلم في هذا الدرس التحكم في أقصي عرض لعناصر HTML بأستخدام خاصية max-width في لغة CSS.
التاريخ
16 نوفمبر 2022
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
1246
المواضيع
24
CSS Max Width
خاصية max-width للتحكم في أقصي عرض للعنصر بلغة CSS
</>
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.
max-width:value;
CSS max-width values
قيم خاصية max-width في لغة CSS.
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.
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.
.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.
p { max-width:10%; border: 1px solid red; }