113 lines
5.1 KiB
Markdown
113 lines
5.1 KiB
Markdown
|
---
|
|||
|
title: Height and Width Dimensions
|
|||
|
localeTitle: أبعاد الطول والعرض
|
|||
|
---
|
|||
|
## أبعاد الطول والعرض
|
|||
|
|
|||
|
### فريف
|
|||
|
|
|||
|
يمكن للمبرمجين استخدام خصائص الارتفاع والعرض لتغيير ارتفاع وعناصر محددة. لكي يتم تغيير أبعادها ، يجب تعيين قيمة `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` العنصر بنفس الارتفاع كعنصر رئيسي أقرب.
|
|||
|
|
|||
|
**مثال:**
|
|||
|
|
|||
|
`
|
|||
|
<p id="red">Example text</p>
|
|||
|
`
|
|||
|
|
|||
|
`p#red {
|
|||
|
margin: 0;
|
|||
|
background-color: red;
|
|||
|
height: 50vh;
|
|||
|
line-height: 50vh;
|
|||
|
text-align:center;
|
|||
|
}
|
|||
|
`
|
|||
|
|
|||
|
**نتيجة:** ![مثال واحد](https://image.prntscr.com/image/dbKSQofTThGZRD7FJLyjJQ.png) يستخدم المثال أعلاه وحدة `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;
|
|||
|
}
|
|||
|
`
|
|||
|
|
|||
|
**نتيجة:** ![مثال 3](https://image.prntscr.com/image/eRdqazdUSWO2rdVfcUb5rQ.png)
|
|||
|
|
|||
|
#### عرض:
|
|||
|
|
|||
|
تفسيرات خاصية عرض CSS هي نفسها تمامًا مثل خصائص الارتفاع "باستثناء أنها تغيّر عرض العنصر. لذلك ، سأعرض فقط بعض الأمثلة على استخدام هذه الخصائص أدناه.
|
|||
|
|
|||
|
**مثال:**
|
|||
|
|
|||
|
`p {
|
|||
|
width: 150px;
|
|||
|
background-color: red;
|
|||
|
}
|
|||
|
`
|
|||
|
|
|||
|
**نتيجة:** ![مثال 4](https://image.prntscr.com/image/x1_khU6TQsmZQznt7YU9qw.png)
|
|||
|
|
|||
|
_ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يستهلك العرض المحدد فقط ثم يكسر في السطر التالي._
|
|||
|
|
|||
|
**مثال:**
|
|||
|
|
|||
|
`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
|