الفرق بين المراجعتين ل"CSS/width"

المراجعة الحالية بتاريخ 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 التي تُحدِّد ارتفاع العناصر.

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

مسودة 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.

@@ سطر 39: / سطر 39: @@
 == أمثلة ==
 مثال عن استخدام الأطوال المطلقة <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">
 div {
@@ سطر 55: / سطر 55: @@
 }
 </syntaxhighlight>أما هذا المثال فهو يضبط عرض <code>width</code> العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:<syntaxhighlight lang="html">
-<div class="percent">Width in percentage</div>
+<div class="percent">العرض كنسبة مئوية</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 95: / سطر 95: @@
 </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].