الفرق بين المراجعتين لصفحة: «CSS/width»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>width</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>width</code>}}</noinclude> | ||
الخاصية <code>width</code> في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار. | الخاصية <code>width</code> في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 20: | ||
|نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | |نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* كلمة محجوزة */ | |||
width: auto; | |||
/* <length> أطوال */ | |||
width: 120px; | |||
width: 10em; | |||
/* <percentage> نسب مئوية */ | |||
width: 75%; | |||
/* قيم عامة */ | |||
width: inherit; | |||
width: initial; | |||
width: unset; | |||
</syntaxhighlight>الخاصيتان <code>[[CSS/min-width|min-width]]</code> و <code>[[CSS/max-width|max-width]]</code> لهما الأولوية على الخاصية <code>width</code>. | |||
== أمثلة == | == أمثلة == | ||
| سطر 81: | سطر 83: | ||
تقبل الخاصية <code>width</code> إحدى القيم الآتية: | تقبل الخاصية <code>width</code> إحدى القيم الآتية: | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد العرض بالأطوال المطلقة. | تحديد العرض بالأطوال المطلقة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | ||
=== | === <code>auto</code> === | ||
سيحسب المتصفح قيمة عرض العنصر تلقائيًا. | سيحسب المتصفح قيمة عرض العنصر تلقائيًا. | ||
مراجعة 19:09، 6 يوليو 2018
الخاصية width في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto.
|
/* كلمة محجوزة */
width: auto;
/* <length> أطوال */
width: 120px;
width: 10em;
/* <percentage> نسب مئوية */
width: 75%;
/* قيم عامة */
width: inherit;
width: initial;
width: unset;
الخاصيتان min-width و max-width لهما الأولوية على الخاصية width.
أمثلة
مثال عن استخدام الأطوال المطلقة <length> مع الخاصية width لتحديد عرض العناصر:
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>
شيفرة CSS:
div {
border: 1px solid black;
padding: 1em;
margin: 1em;
}
.px_length {
width: 200px;
}
.em_length {
width: 20em;
}
أما هذا المثال فهو يضبط عرض width العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:
<div class="percent">Width in percentage</div>
شيفرة CSS:
.percent {
width: 20%;
border: 1px solid black;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 3.0 | 4.0 | 4.0 | 1.0 |
البنية العامة
تقبل الخاصية width إحدى القيم الآتية:
<length>
تحديد العرض بالأطوال المطلقة.
<percentage>
تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
auto
سيحسب المتصفح قيمة عرض العنصر تلقائيًا.
البنية الرسمية
width: auto | [ <length> | <percentage> ];
مصادر ومواصفات
- مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3.
- مسودة CSS Basic Box Model. أضافت هذه المسودة الكلمات المحجوزة
max-contentوmin-contentوavailableوfit-contentوborder-boxوcontent-box، لكن دعمها ما يزال ضعيفًا في المتصفحات. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.