5.1 KiB
| title | localeTitle |
|---|---|
| Height and Width Dimensions | أبعاد الطول والعرض |
أبعاد الطول والعرض
فريف
يمكن للمبرمجين استخدام خصائص الارتفاع والعرض لتغيير ارتفاع وعناصر محددة. لكي يتم تغيير أبعادها ، يجب تعيين قيمة display الخاصة بهذه العناصر إلى block أو block inline-block .
بناء الجملة
ارتفاع:
height: auto|length|initial|inherit;min-height: length|initial|inherit;max-height: none|length|initial|inherit;
عرض:
width: auto|value|initial|inherit;min-width: length|initial|inherit;max-width: none|length|initial|inherit;
الاستخدام و الأمثلة
جميع الخصائص المذكورة أعلاه يمكن أن يكون لها قيمة واحدة فقط.
ارتفاع:
تحدد خاصية height الدقيق لعنصر. القيمة auto هي القيمة الافتراضية وتسمح للمتصفح بتعيين الارتفاع تلقائيًا. يتم تحديد ذلك عادةً عن طريق المساحة الرأسية التي يأخذها محتوى العنصر. يمكن ضبط طول الارتفاع ليصبح ثابتًا في px ، بالنسبة إلى ارتفاع أقرب عنصر رئيسي باستخدام وحدة % ، أو بالنسبة إلى ارتفاع إطار العرض باستخدام وحدة vh . سوف يكون للقيمة initial نفس التأثير للقيمة auto بينما تعطي قيمة inherit العنصر بنفس الارتفاع كعنصر رئيسي أقرب.
مثال:
`
Example text
`p#red { margin: 0; background-color: red; height: 50vh; line-height: 50vh; text-align:center; }
نتيجة: 
يستخدم المثال أعلاه وحدة vh لإعداد الارتفاع. يتم استخدام هذه الوحدة لضبط ارتفاع العنصر بالنسبة لارتفاع إطار العرض. في هذه الحالة ، تُعطى الفقرة الحمراء ارتفاعًا يبلغ نصف ارتفاع إطار العرض حتى تستهلك 50٪ من الشاشة. ملاحظة: يجب إزالة جميع الهوامش الافتراضية من النص لجعل النتيجة تظهر كما ينبغي.
تحدد الخاصية min-height الحد الأدنى للارتفاع الذي يجب أن يحتوي عليه العنصر. هذه الخاصية مفيدة عند تغيير حجم الصفحة بشكل رأسي ، حيث يمكن للمبرمج منع عنصر من التقلص أكثر من اللازم وعدم الظهور بشكل جيد. يتم تعيين القيمة الافتراضية للحد min-height لعنصر ما على 0. سيحظر رمز CSS أدناه الفقرة ذات ID المثال من التقلص إلى أقل من 400 بكسل في الارتفاع.
مثال:
p#example { min-height: 400px; }
تحدد الخاصية max-height أقصى ارتفاع يمكن أن يصل إليه العنصر. قد يكون ذلك مفيدًا عندما لا تريد أن يكون العنصر أكبر من حجم معين. إذا كان محتوى العنصر أعلى من قيمة max-height المحتوى.
مثال:
p { max-height: 40px; background-color: red; }
نتيجة: 
عرض:
تفسيرات خاصية عرض CSS هي نفسها تمامًا مثل خصائص الارتفاع "باستثناء أنها تغيّر عرض العنصر. لذلك ، سأعرض فقط بعض الأمثلة على استخدام هذه الخصائص أدناه.
مثال:
p { width: 150px; background-color: red; }
نتيجة: 
ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يستهلك العرض المحدد فقط ثم يكسر في السطر التالي.
مثال:
p { min-width: 50px; }
لن يسمح الكود السابق ببساطة لعنصر فقرة أن يتقلص أفقيًا إلى أقل من 50 بكسل.
مثال:
p { max-width: 300px; background-color: red; }
لن يسمح الرمز أعلاه بعرض عنصر أكبر من 300 بكسل.
آمل أن تكون هذه المقالة قد ساعدت في إرضائك مع أبعاد ارتفاع وعرض CSS. أدرجت بعض الروابط أدناه ، إذا كنت ترغب في قراءة المزيد عن هذه الخصائص.
معلومات اكثر:
- أبعاد ارتفاع وعرض CSS: https://www.w3schools.com/css/css_dimension.asp
- خاصية ارتفاع CSS: https://www.w3schools.com/cssref/pr dim height.asp
- خاصية عرض CSS: https://css-tricks.com/almanac/properties/w/width/
- أطوال CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/length