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