التحكم في الأبعاد
تسجيل الدخول
تحديد أبعاد العنصر
تحتوي لغة CSS على العديد من خصائص الأبعاد ، مثل width
و height
وmax-width
وmin-width
و max-height
وmin-height
التي تسمح لنا بالتحكم في عرض العنصر وارتفاعه. في هذا الدرس سوف نتعلم كيفية استخدام هذه الخصائص لإنشاء تخطيط أفضل لصفحة الويب.
تحديد عرض و إرتفاع العنصر
تحدد الخصائص width
و height
عرض منطقة المحتوى للعنصر وارتفاعها.
لا يشمل هذا العرض والارتفاع الحواشي paddings أو الحدود borders أو الهوامش margins. راجع درس نموذج الصندوق لمعرفة كيفية حساب العرض والارتفاع الفعليين لصندوق العنصر.
دعنا نجرب المثال التالي ونرى كيفية عمل هذه الخصائص :
- div {
- width: 300px;
- height: 200px;
- }
تحدد قواعد 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 بكسل. لنلق نظرة على المثال التالي:
- div {
- width: 300px;
- max-width: 200px;
- }
إذا تم تحديد خاصية min-width
بقيمة أكبر من قيمة خاصية max-width
، في هذه الحالة ستكون قيمة min-width
هي القيمة المطبقة.
وبالمثل ، فإن العنصر الذي تم تطبيق الخاصية max-height
عليه لن يكون أبدًا أطول من القيمة المحددة لهذه الخاصية ، حتى إذا تم اعطاء قيمة أكبر للخاصية height
. على سبيل المثال ، إذا تم تحديد قيمة الخاصية height
بـ 200 بكسل وتم تحديد قيمة الخاصية max-height
بـ 100 بكسل ، فسيكون الارتفاع الفعلي للعنصر 100 بكسل.
- div {
- height: 200px;
- max-height: 100px;
- }
إذا تم تحديد قيمة للخاصية min-height
أكبر من قيمة الخاصية max-height
، في هذه الحالة ستكون قيمة الخاصية min-height
هي القيمة المطبقة.
تحديد الحد الأدنى للعرض والارتفاع
يمكننا استخدام الخاصية min-width
و min-height
لتحديد الحد الأدنى للعرض والارتفاع لمنطقة المحتوى. لا يشمل الحد الأدنى للعرض والارتفاع الحواشي أو الحدود أو الهوامش.
لا يمكن أن يكون العنصر أضيق من قيمة min-width
، حتى إذا تم تحديد قيمة للخاصية width
أقل من ذلك. على سبيل المثال ، إذا تم تحديد قيمة الخاصية width
بـ 300 بكسل وتم تحديد قيمة الخاصية min-width
بـ 400 بكسل ، فسيكون العرض الفعلي للعنصر 400 بكسل. دعونا نرى كيف عملها في المثال التالي:
- div {
- width: 200px;
- min-width: 400px;
- }
عادةً ما تُستخدم الخاصية min-width
لضمان أن يكون للعنصر حد أدنى للعرض على الأقل حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز محتواه الحد الأدنى للعرض المحدد.
وبالمثل ، فإن العنصر الذي يتم تطبيق الخاصية min-height
عليه لن يكون أبدًا أقصر من القيمة المحددة لهذه الخاصية ، حتى إذا تم تحديد قيمة أقل للخاصية height
. على سبيل المثال ، إذا تم تحديد قيمة للخاصية height
بـ 200 بكسل ، وتم تحديد قيمة الخاصية min-height
بـ 300 بكسل ، فسيكون الارتفاع الفعلي للعنصر 300بكسل.
- div {
- height: 100px;
- min-height: 200px;
- }
عادةً ما تُستخدم الخاصية min-height
للتأكد من أن أحد العناصر لديه على الأقل حد أدنى للارتفاع حتى في حالة عدم وجود محتوى. ومع ذلك ، سيتم السماح للعنصر بالنمو بشكل طبيعي إذا تجاوز المحتوى الحد الأدنى للارتفاع المحدد.
تحديد نطاق العرض والارتفاع
غالبًا ما يتم استخدام الخصائص min-width
و min-height
مع خصائص max-width
و max-height
لصنع نطاق عرض وارتفاع لعنصر.
يمكن أن يكون هذا مفيدًا جدًا لإنشاء تصميم مرن. في المثال التالي ، سيكون الحد الأدنى لعرض عنصر <div>
300 بكسل ويمكن أن يمتد أفقيًا بحد أقصى 500 بكسل.
- div {
- min-width: 300px;
- max-width: 500px;
- }
وبالمثل ، يمكننا تحديد نطاق ارتفاع لعنصر. في المثال أدناه ، سيكون الحد الأدنى لارتفاع العنصر <div>
300 بكسل ويمكن أن يمتد رأسيًا حتى 500 بكسل كحد أقصى.
- div {
- min-height: 300px;
- max-height: 500px;
- }