العرض والارتفاع في CSS | خصائص CSS

العرض والارتفاع في CSS

تُستخدم سمات الطول والعرض لضبط طول وعرض عنصر. في هذا الدرس، سنتعرف على أنواع السمات المستخدمة لضبط طول وعرض العنصر.


يبلغ طول العنصر أدناه 100٪ من المساحة المتوفرة:

طول هذا العنصر يساوي 100٪.


قيمة سمات الطول والعرض 

تُستخدم سمات الطول والعرض لضبط طول وعرض عنصر.

يمكن تعيين سمات الطول والعرض إلى تلقائي (وهي القيمة الافتراضية لهاتين السمتين وتعني أن المستعرض يحسب الطول والعرض)، أو قيمة يمكن أن تكون بالبكسل والسنتيمتر وما إلى ذلك. أو تعيين قيمة كنسبة مئوية (٪).

العنصر الموضح أدناه له قيمة 200 بكسل للعرض و 50٪ للطول:

يبلغ طول هذا العنصر 50٪ وعرضه 200 بكسل.
div {
height: 200px;
width: 50%;
background-color:
;
}

 العنصر الموضح أدناه له قيمة 100 بكسل للعرض و 500 بكسل للطول:

يبلغ طول هذا العنصر 500 بكسل وعرضه 100 بكسل.
div {
height: 100px;
width: 500px;
background-color:
;
}

قيمة أقصى لعرض السمة

تُستخدم السمة max-width لتعيين الحد الأقصى لطول العنصر.

يمكن تحديد السمة max-width بواسطة القيم بالبكسل، السنتيمتر، إلخ، أو بواسطة النسبة المئوية (٪) للمساحة التي توجد بها، أو بالقيمة لا شيء (وهي القيمة الافتراضية لهذا هي صفة وتعني أنه لم يتم تعيين قيمة لهذه الصفة.

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

في هذه الحالات، يمكن إدارة هذه المشكلة باستخدام سمة max-width.

يبلغ الحد الأقصى لطول هذا العنصر 500 بكسل وعرضه 100 بكسل.


في المثال أدناه، يظهر عنصر div بعرض 100 بكسل وبحد أقصى 500 بكسل.

div {
max-width: 500px;
height: 100px;
background-color:
;
}

 


كلمات مفتاحية: