الخاصية width
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية 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.