16. تحديد العرض والارتفاع (ثابت مقابل مرن)

نحدد الحدود البعدية للعنصر باستخدام width و height ونظائرهما من الحد الأدنى والأقصى (min/max).

الأبعاد الثابتة (بكسل)

استخدام وحدات مثل px يحدد حجماً ثابتاً. سيظل العنصر دائماً بهذا الحجم، بغض النظر عن حجم الشاشة أو الحاوية الأب الخاصة به.

css .fixed-sidebar { width: 300px; /* دائماً بعرض 300 بكسل / height: 800px; / دائماً بطول 800 بكسل */ }

الأبعاد الثابتة جيدة للعناصر التي لا ينبغي أن يتغير حجمها (مثل الشعارات أو الأيقونات القياسية).

باستخدام النسب المئوية (%) أو وحدات منفذ العرض (Viewport units مثل vw و vh) تنشأ عناصر مرنة تتكيف مع حاويتها أو حجم الشاشة.

width: 50% تعني أن العنصر سيشغل 50% من عرض العنصر الأب المباشر له.
النسب المئوية للارتفاع height غالباً ما تكون غير موثوقة ما لم يكن للعنصر الأب ارتفاع محدد.

css .half-width { width: 50%; /* 50% من عرض الحاوية الأب */ }

هذه ضرورية للتصميم المتجاوب. فهي تمنع العناصر من أن تصبح صغيرة جداً أو كبيرة جداً.

الخاصية	الوصف
`min-width`	لا يمكن للعنصر أن يتقلص عن هذه القيمة.
`max-width`	لا يمكن للعنصر أن يتوسع بعد هذه القيمة (شائع جداً: `max-width: 100%` غالباً ما يستخدم للصور).
`min-height`	لا يمكن للعنصر أن يتقلص عن هذا الارتفاع.
`max-height`	لا يمكن للعنصر أن يتوسع فوق هذا الارتفاع.

css .main-content { width: 90%; max-width: 1200px; /* لن يزيد عرضه أبداً عن 1200 بكسل / min-height: 400px; / دائماً بطول 400 بكسل على الأقل */ }