الفرق بين المراجعتين لصفحة: «CSS/width»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 99: | سطر 99: | ||
* مواصفة [http://www.w3.org/TR/CSS2/visudet.html#the-width-property CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/visudet.html#the-width-property CSS Level 2 (Revision 1)]. | ||
* مواصفة [http://www.w3.org/TR/CSS1/#width CSS Level 1]. | * مواصفة [http://www.w3.org/TR/CSS1/#width CSS Level 1]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Box Model]] | [[تصنيف:CSS Box Model|{{SUBPAGENAME}}]] | ||
مراجعة 15:35، 28 يناير 2018
الخاصية width في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.
/* كلمة محجوزة */
width: auto;
/* <length> أطوال */
width: 120px;
width: 10em;
/* <percentage> نسب مئوية */
width: 75%;
/* قيم عامة */
width: inherit;
width: initial;
width: unset;
الخاصيتان min-width و max-width لهما الأولوية على الخاصية width.
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto.
|
أمثلة
مثال عن استخدام الأطوال المطلقة <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.