شرح صفوف ومحتوى الفقرة
متى ظهر عنصر بعرض أكبر أو أصغر من قيمة width المكتوبة له، افتح أدوات المطور DevTools بمفتاح F12 وحدد العنصر ثم انتقل إلى تبويب Computed؛ فهناك ستشاهد العرض النهائي بالبكسل وتكتشف فوراً ما إذا كانت min-width أو max-width قد حسمت القياس.
راجع الجدول الختامي المقارن الذي يجمع خصائص العرض الأفقية الثلاث جنباً إلى جنب:
| الخاصية | القيمة الافتراضية | الدور التخطيطي الرئيسي | مرتبة الأولوية عند التعارض |
|---|---|---|---|
width | auto | تحديد العرض المستهدف المفضل للصندوق | الثالثة — تخضع للسقف الأعلى والحد الأدنى |
max-width | none | وضع سقف أعلى يمنع التمدد والفيضان | الثانية — تقيد width وتخضع لـ min-width |
min-width | auto | حماية العنصر من الانضغاط المفرط | الأولى — تتفوق على max-width و width |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في ملخص الدرس حماية الأزرار والبطاقات بخاصية min-width بوحدات الطول والنسب المئوية وكلمة min-content، وتحققت من تفوقها القياسي عند تعارض الأبعاد. وفي الخطوة التالية ستنتقل إلى درس «دالة calc في لغة CSS» لدمج الوحدات المختلفة في معادلات رياضية مباشرة.