خصائص display CSS

التعريف والاستخدام

تحدد خاصية display نوع الصندوق الذي يجب إنشاؤه للعنصر.

الشرح

يستخدم هذا الخصوصية لتحديد نوع الصندوق الذي سيتم إنشاؤه من قبل العنصر أثناء بناء التخطيط. بالنسبة لمستندات HTML مثل، إذا لم يتم استخدام display بحذر فإن ذلك يمكن أن يكون خطيرًا لأنه قد ينتهك التسلسل الهرمي للعرض الذي تم تعريفه مسبقًا في HTML. بالنسبة لXML، حيث لا يوجد هذا التسلسل الهرمي المدمج، فإن display ضروري بشكل ضروري.

ملاحظة:في CSS2 هناك قيم compact و marker، ولكن نظرًا لعدم وجود دعم واسع النطاق، تم إزالتها من CSS2.1.

انظر أيضًا:

دليل CSSتوضيح CSS

دليل HTML DOMخاصية display

مثال

جعل الفقرة تظهر كحلقة داخلية:

p.inline
  {
  display:inline;
  }

جرب بنفسك

قواعد اللغة CSS

display: value;

قيمة الخاصية

القيمة الوصف
none سيتم عرض هذا العنصر.
block سيتم عرض هذا العنصر كعنصر حجري، وسيكون لديه مسافات قبل وبعد العنصر.
تضمين القيمة الافتراضية. سيتم عرض هذا العنصر كعنصر داخل خطي، وسيكون لديه مسافات قبل وبعد العنصر.
inline-block عنصر داخل خطي. (قيمة جديدة في CSS2.1)
list-item سيتم عرض هذا العنصر كقائمة.
run-in سيتم عرض هذا العنصر بناءً على السياق كعنصر حجري أو عنصر متداخل.
compact في CSS هناك قيمة compact، ولكن نظرًا لعدم وجود دعم واسع النطاق، تم حذفها من CSS2.1.
marker هناك قيمة marker في CSS، ولكن بسبب عدم وجود دعم واسع، تم حذفها من CSS2.1.
table سيُعرض هذا العنصر كطاولة بلوك (مثل <table>)، مع حركات انتقال قبل أو بعد الطاولة.
inline-table سيُعرض هذا العنصر كطاولة تضمين (مثل <table>)، دون حركات انتقال قبل أو بعد الطاولة.
table-row-group سيُعرض هذا العنصر كفئة صف أو أكثر (مثل <tbody>)
table-header-group سيُعرض هذا العنصر كفئة صف أو أكثر (مثل <thead>)
table-footer-group سيُعرض هذا العنصر كفئة صف أو أكثر (مثل <tfoot>)
table-row سيُعرض هذا العنصر كصف طاولة (مثل <tr>)
table-column-group سيُعرض هذا العنصر كفئة صفعة أو أكثر (مثل <colgroup>)
table-column سيُعرض هذا العنصر كصفعة خلية (مثل <col>)
table-cell سيُعرض هذا العنصر كخلية طاولة (مثل <td> و <th>)
table-caption سيُعرض هذا العنصر كعنوان طاولة (مثل <caption>)
تنقل يجب أن تُحدد الخاصية display من عنصر الأب.

تفاصيل التقنية

القيمة الافتراضية: تضمين
التنقل: لا
الإصدار: CSS1
جافا سكربت الجملة: العدة.style.display="inline"

TIY مثال

كيفية عرض العنصر كعنصر تضمين
هذا المثال يوضح كيفية عرض العنصر كعنصر تضمين.
كيفية عرض العنصر كعنصر بلوك
هذا المثال يوضح كيفية عرض العنصر كعنصر بلوك.

دعم المتصفحات

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

ملاحظة:إذا تم تحديد !DOCTYPE، يدعم متصفح Internet Explorer 8 (وكل الإصدارات الأحدث) قيم الخاصية "inline-table"، "run-in"، "table"، "table-caption"، "table-cell"، "table-column"، "table-column-group"، "table-row"، "table-row-group"، وكذلك "inherit".