CSS

CSS Min Width
خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

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

التاريخ

17 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

521

المواضيع

24
الشروحات chevron_left CSS Min Width chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Min Width
خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

</> CSS Min Width
خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

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

  • إذا كان المحتوي أقل من عرض العنصر فأن خاصية min-width تؤثر علي العنصر ويكون لها وظيفة في هذة الحالة.
  • في حال أن محتوي العنصر أطول من القيمة الموجودة في min-width فأن خاصية min-width لا تعمل ولا تؤثر علي العرض.
  • قيمة خاصية width إذا كانت أصغر من القيمة الموجودة في خاصية min-width لا تعمل ولا تؤثر علي عرض العنصر. 


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

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

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

min-width:value;
CSS min-width values

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

min-width:none|length|initial|inherit;

</> CSS min-width length
خاصية min-width مع القيمة length في لغة CSS

يكون للعنصر أقل عرض ممكن إذا قل حجم المحتوي عن عرض العنصر عن طريقة خاصية min-width في لغة CSS وهو الحد الأدني للعرض لا يقل عن القيمة الموجدة داخل خاصية min-width.
CSS min width length

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

p
{
  min-width:400px;
  width:100px;
  border: 1px solid red;
}

</> CSS min width percentage
خاصية min-width مع القيمة percentage في لغة CSS

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

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

p
{
  margin:0;
  width:10px;
  min-width:50%;
  border: 1px solid red;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات