التحكم في الأبعاد

تحديد أبعاد العنصر

تحتوي لغة CSS على العديد من خصائص الأبعاد ، مثل width و height وmax-width وmin-width و max-height وmin-height التي تسمح لنا بالتحكم في عرض العنصر وارتفاعه. في هذا الدرس سوف نتعلم كيفية استخدام هذه الخصائص لإنشاء تخطيط أفضل لصفحة الويب.

تحديد عرض و إرتفاع العنصر

تحدد الخصائص width و height عرض منطقة المحتوى للعنصر وارتفاعها.
لا يشمل هذا العرض والارتفاع الحواشي paddings أو الحدود borders أو الهوامش margins. راجع درس نموذج الصندوق لمعرفة كيفية حساب العرض والارتفاع الفعليين لصندوق العنصر.
دعنا نجرب المثال التالي ونرى كيفية عمل هذه الخصائص :

مثال
تشغيل
  1. div {
  2. width: 300px;
  3. height: 200px;
  4. }

تحدد قواعد CSS أعلاه عرضًا ثابتًا يبلغ 300 بكسل وارتفاع 200 بكسل للعنصر <div>. يمكن أن تأخذ خصائص العرض والارتفاع القيم التالية:

  • قيم بالبكسل او em او rem او pt او cm ... إلخ.
  • النسبة المئوية : النسبة المئوية تكون نسبية للعنصر الأب.
  • auto - يحسب متصفح الويب عرضًا مناسبًا للعنصر.
  • initial - يضبط العرض والارتفاع على قيمته الافتراضية ، وهي القيمة auto.
  • inherit - تحدد أن العرض يجب أن يورث من العنصر الأب.

لا يمكنك تحديد قيم سالبة للخصائص width و height .

ملاحظة:

عادةً عندما تقوم بإنشاء عنصر كتلة block element , مثل <div> و <p> ... إلخ. يقوم متصفح الويب تلقائيًا بتعيين عرضه على 100٪ من العرض المتاح ، والارتفاع بما يتناسب مع ما هو مطلوب لعرض المحتوى.
يجب تجنب تحديد عرض وارتفاع ثابت للعنصر ما لم يكن ذلك ضروريًا.

تحديد الحد الأقصى للعرض والارتفاع

يمكنك استخدام الخصائص max-width و max-height لتحديد الحد الأقصى للعرض والارتفاع لمنطقة المحتوى. لا يشمل الحد الأقصى للعرض والارتفاع الحواشي أو الحدود أو الهوامش.
لا يمكن أن يكون العنصر اعرض من قيمة الخاصية max-width ، حتى إذا تم تحديد قيمة أكبر للخاصية width. على سبيل المثال ، إذا تم تحديد قيمة الخاصية width بـ 300 بكسل وتم تحديد قيمة الخاصية max-width بـ 200 بكسل ، فسيكون العرض الفعلي للعنصر 200 بكسل. لنلق نظرة على المثال التالي:

مثال
تشغيل
  1. div {
  2. width: 300px;
  3. max-width: 200px;
  4. }
ملاحظة:

إذا تم تحديد خاصية min-width بقيمة أكبر من قيمة خاصية max-width ، في هذه الحالة ستكون قيمة min-width هي القيمة المطبقة.

وبالمثل ، فإن العنصر الذي تم تطبيق الخاصية max-height عليه لن يكون أبدًا أطول من القيمة المحددة لهذه الخاصية ، حتى إذا تم اعطاء قيمة أكبر للخاصية height . على سبيل المثال ، إذا تم تحديد قيمة الخاصية height بـ 200 بكسل وتم تحديد قيمة الخاصية max-height بـ 100 بكسل ، فسيكون الارتفاع الفعلي للعنصر 100 بكسل.

مثال
تشغيل
  1. div {
  2. height: 200px;
  3. max-height: 100px;
  4. }
ملاحظة:

إذا تم تحديد قيمة للخاصية min-height أكبر من قيمة الخاصية max-height ، في هذه الحالة ستكون قيمة الخاصية min-height هي القيمة المطبقة.

تحديد الحد الأدنى للعرض والارتفاع

يمكننا استخدام الخاصية min-width و min-height لتحديد الحد الأدنى للعرض والارتفاع لمنطقة المحتوى. لا يشمل الحد الأدنى للعرض والارتفاع الحواشي أو الحدود أو الهوامش.
لا يمكن أن يكون العنصر أضيق من قيمة min-width ، حتى إذا تم تحديد قيمة للخاصية width أقل من ذلك. على سبيل المثال ، إذا تم تحديد قيمة الخاصية width بـ 300 بكسل وتم تحديد قيمة الخاصية min-width بـ 400 بكسل ، فسيكون العرض الفعلي للعنصر 400 بكسل. دعونا نرى كيف عملها في المثال التالي:

مثال
تشغيل
  1. div {
  2. width: 200px;
  3. min-width: 400px;
  4. }
ملاحظة:

عادةً ما تُستخدم الخاصية min-width لضمان أن يكون للعنصر حد أدنى للعرض على الأقل حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز محتواه الحد الأدنى للعرض المحدد.

وبالمثل ، فإن العنصر الذي يتم تطبيق الخاصية min-height عليه لن يكون أبدًا أقصر من القيمة المحددة لهذه الخاصية ، حتى إذا تم تحديد قيمة أقل للخاصية height . على سبيل المثال ، إذا تم تحديد قيمة للخاصية height بـ 200 بكسل ، وتم تحديد قيمة الخاصية min-height بـ 300 بكسل ، فسيكون الارتفاع الفعلي للعنصر 300بكسل.

مثال
تشغيل
  1. div {
  2. height: 100px;
  3. min-height: 200px;
  4. }
ملاحظة:

عادةً ما تُستخدم الخاصية min-height للتأكد من أن أحد العناصر لديه على الأقل حد أدنى للارتفاع حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز المحتوى الحد الأدنى للارتفاع المحدد.

تحديد نطاق العرض والارتفاع

غالبًا ما يتم استخدام الخصائص min-width و min-height مع خصائص max-width و max-height لصنع نطاق عرض وارتفاع لعنصر.
يمكن أن يكون هذا مفيدًا جدًا لإنشاء تصميم مرن. في المثال التالي ، سيكون الحد الأدنى لعرض عنصر <div> 300 بكسل ويمكن أن يمتد أفقيًا بحد أقصى 500 بكسل.

مثال
تشغيل
  1. div {
  2. min-width: 300px;
  3. max-width: 500px;
  4. }

وبالمثل ، يمكننا تحديد نطاق ارتفاع لعنصر. في المثال أدناه ، سيكون الحد الأدنى لارتفاع العنصر <div> 300 بكسل ويمكن أن يمتد رأسيًا حتى 500 بكسل كحد أقصى.

مثال
تشغيل
  1. div {
  2. min-height: 300px;
  3. max-height: 500px;
  4. }
« التالي السابق »