خاصية 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>

القيم الخاصة بخاصية 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>