الكورس

Advertisements

خاصية Max-width فى CSS


سيعلمك هذا الفصل خاصية Max-width فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.


 

خاصية Max-width فى CSS

 

تحدد خاصية max-width العرض الأقصى لعرض العنصر.

لا يمكن أن تكون قيمة العرض أكبر من القيمة بحد أقصى عرض. إذا كان المحتوى أكبر ، فسيتم الانتقال إلى السطر التالي ، وإذا كان المحتوى أصغر ، فلن يكون له أي تأثير.

 

مثال للتوضيح:

<style>
.one {
    background: #cebcbc;
}

.two {
    max-width: 90px;
    background: #cebcbc;
}
</style>

<p class="one">Paragraph without max-width</p>
<p class="two">Paragraph with max-width</p>

Paragraph without max-width

Paragraph with max-width


 

القيم الخاصة بخاصية max-width

 

القيم المتوفرة:

  1. none: إنها القيمة الافتراضية ولا تحتوي على أقصى عرض.
  2. length: تُستخدم هذه الخاصية لتعيين طول max-width. يمكن ضبط الطول بالـ px و cm وما إلى ذلك.
  3. percentage (٪): تُستخدم هذه الخاصية لتعيين الحد الأقصى للعرض في شكل نسبة مئوية.
  4. initial: يتم استخدامه لتعيين خاصية max-width إلى قيمتها الافتراضية.
  5. inherit: هذه الخاصية موروثة من الأصل.

 

أمثلة توضيحية على القيم المختلفة:

<style>
.one {
    max-width: none;
    background: #cebcbc;
}

.two {
    max-width: 90px;
    background: #cebcbc;
}

.three {
    max-width: 30%;
    background: #cebcbc;
}

.four {
    max-width: initial;
    background: #cebcbc;
}

.five {
    max-width: inherit;
    background: #cebcbc;
}
</style>

<p class="one">None value</p>
<p class="two">Length value</p>
<p class="three">Percentage value</p>
<p class="four">Initial value</p>
<p class="five">Inherit value</p>

None value

Length value

Percentage value

Initial value

Inherit value



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements