الكورس

Advertisements

شرح خواص الـ Width و Height فى CSS


سيتم شرح الخاصية width و height و min-width و max-width و min-height و max-height فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.


 

الخاصية width و height فى CSS

 

تحدد خاصية width و height عرض وارتفاع العنصر. بشكل افتراضي ، تحدد الخاصية عرض وارتفاع منطقة المحتوى.

 

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

<style>
    .box {
        width: 100%;
        height: 100px;
        border: 2px solid black;
    }
</style>

<div class="box">Width & Height Example</div>
Width & Height Example

تأكد من أن العناصر التي تم ضبطها بارتفاع أو عرض لا يتم اقتطاعها أو لا تحجب محتوى آخر عند تكبير الصفحة لزيادة حجم النص.


 

الخاصية min-height

 

تعيّن خاصية min-height الحد الأدنى لارتفاع العنصر.

يمنع القيمة المستخدمة لخاصية الـ height من أن تصبح أصغر من القيمة المحددة لـ min-height.

 

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

<style>
    .box {
        min-height: 150px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of min-height.</div>
Example of min-height.

 

الخاصية max-height

 

تعيّن خاصية mix-height الحد الأقصى لارتفاع العنصر.

يمنع القيمة المستخدمة لخاصية الـ height من أن تصبح أصغر من القيمة المحددة لـ max-height.

 

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

<style>
    .box {
        min-height: 200px;
        max-height: 250px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of max-height.</div>
Example of max-height.

 

الخاصية min-width

 

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

يمنع القيمة المستخدمة لخاصية الـ width من أن تصبح أصغر من القيمة المحددة لـ min-width.

 

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

<style>
    .box {
        min-width: 100px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of min-width.</div>
Example of min-width.

 

الخاصية max-width

 

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

يمنع القيمة المستخدمة لخاصية الـ width من أن تصبح أصغر من القيمة المحددة لـ max-width.

 

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

<style>
    .box {
        min-width: 100px;
        max-width: 200px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of max-width.</div>
Example of max-width.

 

قيم الخاصية width و height

 

قد تحتوي خصائص الارتفاع والعرض على القيم التالية:

  • %: لتحديد الارتفاع أو العرض بالنسبة المئوية للعنصر.
  • length: لتحديد الارتفاع أو العرض بالبكسل px أو cm.. إلخ.
  • initial: يضبط الارتفاع أو العرض على قيمته الافتراضية.
  • auto: (القيمة الإفتراضية) يقوم المستعرض بحساب الارتفاع والعرض الإفتراضى للعنصر.
  • inherit: سيتم إحتساب الارتفاع أو العرض من قيمته الأصلية.

 

تنطبق هذه القيم على الخاصية و min-width و max-width و min-height و max-height أيضًا.

 



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

×

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

[email protected]

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

Advertisements