CSS: عرض وارتفاع وفيضان CSS

آخر تحديث: 2026-10-13

خصائص هذا القسم: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

1. العرض والارتفاع

(1) مرجع سريع لخصائص الأبعاد

(2) العرض والارتفاع

width وheight تُعيّنان أبعاد منطقة محتوى العنصر:

▶ مثال

(3) الوحدات الشائعة

▶ مثال

(4) min-width / max-width

يحدان الحد الأدنى/الأقصى لعرض العنصر، يُستخدمان بشكل شائع في التصميم المتجاوب:

▶ مثال

(5) min-height / max-height

▶ مثال

2. دالة calc()

calc() هي دالة CSS تتيح العمليات الحسابية (جمع، طرح، ضرب، قسمة) في قيم الخصائص. أكبر ميزة لها هي خلط وحدات مختلفة.

▶ مثال

(1) حالات الاستخدام الشائعة

1. شريط جانبي + محتوى رئيسي: .main { width: calc(100% - 300px); } يتكيف مع المساحة المتبقية
2. بطاقات متساوية المسافات: .card { width: calc((100% - 40px) / 3); } ثلاثة أعمدة بفجوات 20px
3. خط متجاوب: font-size: calc(14px + 0.5vw); حجم أساسي + زيادة منفذ العرض
4. توسيط دقيق: left: calc(50% - 100px); إزاحة معروفة بديلة لـ transform

(2) توافق calc()

calc() مدعوم في IE11+، Chrome 26+، Firefox 16+، Safari 7+ ويمكن استخدامها بأمان في المشاريع الحديثة. فقط تجنب تسلسل النصوص في calc().

3. التحكم في الفيضان

عندما يتجاوز محتوى العنصر العرض/الارتفاع المُعيَّن، يحدث "فيضان". خاصية overflow تتحكم في كيفية معالجة المحتوى الفائض.

(1) قيم overflow

▶ مثال

(2) التحكم في كل اتجاه

▶ مثال

(3) حالات الاستخدام الشائعة

1. حذف النص بعلامة القطع

مُدمج مع text-overflow لحذف سطر واحد من النص:

▶ مثال

2. قص الصور

حاوية بحجم ثابت مع فيضان مخفي للصور:

▶ مثال

3. حاوية تمرير

إنشاء منطقة قابلة للتمرير بارتفاع ثابت:

▶ مثال

4. مسح الطفو

تعيين overflow: hidden أو overflow: auto على الأصل يمسح تأثيرات طفو الابن:

▶ مثال

4. object-fit (تكيف الصور/الفيديو)

object-fit يتحكم في كيفية تكيف عناصر الاستبدال <img> أو <video> مع حجم الحاوية:

▶ مثال

• cover: يحافظ على النسبة، يملأ الحاوية، يقص الزائد (الأكثر شيوعاً)
• contain: يحافظ على النسبة، يُظهر الصورة كاملة، قد يترك فراغاً
• fill: يمدد لملء without الحفاظ على النسبة (قد يشوّه)
• none: يحافظ على الحجم الأصلي
• scale-down: يأخذ الأصغر بين none وcontain

5. دوال الأبعاد CSS

(1) calc()

calc() تتيح حسابات الأبعاد الديناميكية في CSS، خلط وحدات مختلفة:

▶ مثال

ملاحظة: العوامل يجب أن تكون لها مسافات على كلا الجانبين، وإلا لن يتم التعرف عليها.

خصائص هذا القسم: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

❓ أسئلة شائعة

📖 ملخص

• التحكم في أبعاد العنصر وسلوك الفيضان هو أساس التخطيط
• width/height يُعيّنان الأبعاد، min-width/max-width يُقيّدان النطاق، overflow يُعالج المحتوى الفائض
• object-fit: cover أداة قوية للتعامل مع الصور، بينما calc() يوفر حساباً ديناميكياً مرناً
• إتقان هذه الخصائص يمنحك تحكماً أفضل في سلوك العناصر في جميع الحالات

📝 تمارين

1. أنشئ "حاوية متجاوبة" — عرض 80%، عرض أقصى 1200px، عرض أدنى 320px، مُوَسَّطة أفقياً.
2. أنشئ حاوية صورة بحجم ثابت (300×200) بصورة أكبر، باستخدام object-fit: cover لملء without تشويه.
3. نفّذ تأثيرات "حذف سطر واحد بعلامة القطع" و"فيضان نص متعدد الأسطر" (تلميح: الأسطر المتعددة تستخدم -webkit-line-clamp).
4. استخدم calc() لتنفيذ تخطيط "شاشة كاملة ناقص ارتفاع شريط التنقل".

فريق Web-Tutorial التقني

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

من نحن