الفرق بين المراجعتين ل"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> فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.<syntaxhighlight lang="css">
+
الخاصية <code>width</code> في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.
−
/* كلمة محجوزة */
 
−
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>.
 
 
{| 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>.
  
 
== أمثلة ==
 
== أمثلة ==
 
مثال عن استخدام الأطوال المطلقة <code>[[CSS/length|<length>]]</code> مع الخاصية <code>width</code> لتحديد عرض العناصر:<syntaxhighlight lang="html">
 
مثال عن استخدام الأطوال المطلقة <code>[[CSS/length|<length>]]</code> مع الخاصية <code>width</code> لتحديد عرض العناصر:<syntaxhighlight lang="html">
−
<div class="px_length">Width measured in px</div>
+
<div class="px_length">px العرض مقاس بالواحدة بكسل</div>
−
<div class="em_length">Width measured in em</div>
+
<div class="em_length">em العرض مقاس بالواحدة </div>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
div {
 
div {
سطر 53: سطر 55:
 
}
 
}
 
</syntaxhighlight>أما هذا المثال فهو يضبط عرض <code>width</code> العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:<syntaxhighlight lang="html">
 
</syntaxhighlight>أما هذا المثال فهو يضبط عرض <code>width</code> العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:<syntaxhighlight lang="html">
−
<div class="percent">Width in percentage</div>
+
<div class="percent">العرض كنسبة مئوية</div>
  
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 81: سطر 83:
 
تقبل الخاصية <code>width</code> إحدى القيم الآتية:
 
تقبل الخاصية <code>width</code> إحدى القيم الآتية:
  
−
=== القيمة <code>[[CSS/length|<length>]]</code> ===
+
=== <code>[[CSS/length|<length>]]</code> ===
 
تحديد العرض بالأطوال المطلقة.
 
تحديد العرض بالأطوال المطلقة.
−
=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
+
=== <code>[[CSS/percentage|<percentage>]]</code> ===
 
تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
 
تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
−
=== القيمة <code>auto</code> ===
+
=== <code>auto</code> ===
 
سيحسب المتصفح قيمة عرض العنصر تلقائيًا.
 
سيحسب المتصفح قيمة عرض العنصر تلقائيًا.
  
سطر 93: سطر 95:
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
== انظر أيضًا ==
 +
* صفحة الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
 +
* صفحة الخاصية <code>[[CSS/height|height]]</code> التي تُحدِّد ارتفاع العناصر.
 +
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مسودة [https://drafts.csswg.org/css-sizing-3/#width-height-keywords CSS Intrinsic & Extrinsic Sizing Module Level 3].
 
* مسودة [https://drafts.csswg.org/css-sizing-3/#width-height-keywords CSS Intrinsic & Extrinsic Sizing Module Level 3].

المراجعة الحالية بتاريخ 16:47، 8 يوليو 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">px العرض مقاس بالواحدة بكسل</div>
<div class="em_length">em العرض مقاس بالواحدة </div>

شيفرة CSS:

div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}
.px_length {
  width: 200px;
}

.em_length {
  width: 20em;
}

أما هذا المثال فهو يضبط عرض width العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:

<div class="percent">العرض كنسبة مئوية</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> ];

انظر أيضًا

  • صفحة الخاصية box-sizing التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
  • صفحة الخاصية height التي تُحدِّد ارتفاع العناصر.

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/width&oldid=12459"