خاصية العرض (display) هي أهم خاصية في CSS للتحكم في تخطيط الصفحة.
خاصية العرض
تُستخدم خاصية العرض لتحديد كيفية عرض عنصر على صفحة الويب. لكل عنصر HTML قيمة عرض افتراضية تعتمد على نوع العنصر. القيمة الافتراضية للعرض لمعظم العناصر هي إما “كتلة” (block) أو “متضمنة في السطر” (inline).
تُستخدم خاصية العرض لتغيير سلوك العرض الافتراضي لعناصر HTML.
عناصر مستوى الكتلة (Block-level elements)
يبدأ عنصر مستوى الكتلة دائمًا على سطر جديد ويشغل كامل العرض المتاح (يمتد إلى أقصى يسار ويمين قدر الإمكان).
على سبيل المثال، يعد عنصر <div> عنصرًا على مستوى الكتلة.
أمثلة على عناصر مستوى الكتلة:
<div><h1>إلى<h6><p><form><header><footer><section>
عناصر متضمنة في السطر (Inline elements)
لا يبدأ عنصر متضمن في السطر على سطر جديد ويشغل فقط العرض الضروري.
هذا مثال على عنصر <span> متضمن في السطر داخل فقرة:
The <div> element is a block-level element.
أمثلة على العناصر المتضمنة في السطر:
قيم خاصية العرض (display)
تحتوي خاصية العرض (display) على العديد من القيم:
| القيمة | الوصف |
|---|---|
inline | يعرض العنصر كعنصر متضمن في السطر. |
block | يعرض العنصر كعنصر مستوى كتلة. |
contents | يجعل الحاوية تختفي، ويصبح العناصر الفرعية أطفال للعنصر التالي في مستوى أعلى في DOM. |
flex | يعرض العنصر كحاوية flex على مستوى الكتلة. |
grid | يعرض العنصر كحاوية grid على مستوى الكتلة. |
inline-block | يعرض العنصر كحاوية “كتلة داخل سطر” على مستوى السطر. يتم تنسيق العنصر نفسه كعنصر متضمن في السطر، ولكن يمكنك تطبيق قيم الارتفاع والعرض. |
inline-flex | يعرض العنصر كحاوية flex على مستوى السطر. |
inline-grid | يعرض العنصر كحاوية grid على مستوى السطر. |
inline-table | يتم عرض العنصر كجدول على مستوى السطر. |
list-item | يتيح للعنصر التصرف مثل عنصر <li>. |
run-in | يعرض العنصر إما ككتلة أو متضمن في السطر، اعتمادًا على السياق. |
table | يتيح للعنصر التصرف مثل عنصر <table>. |
table-caption | يتيح للعنصر التصرف مثل عنصر <caption>. |
table-column-group | يتيح للعنصر التصرف مثل عنصر <colgroup>. |
table-header-group | يتيح للعنصر التصرف مثل عنصر <thead>. |
table-footer-group | يتيح للعنصر التصرف مثل عنصر <tfoot>. |
table-row-group | يتيح للعنصر التصرف مثل عنصر <tbody>. |
table-cell | يتيح للعنصر التصرف مثل عنصر <td>. |
table-column | يتيح للعنصر التصرف مثل عنصر <col>. |
table-row | يتيح للعنصر التصرف مثل عنصر <tr>. |
none | يتم إزالة العنصر تمامًا. |
initial | يعيد تعيين هذه الخاصية إلى قيمتها الافتراضية. |
inherit | يرث هذه الخاصية من العنصر الأب. |
خاصية العرض: none
يتم استخدام display: none; بشكل شائع مع JavaScript لإخفاء العناصر وإظهارها دون حذفها وإعادة إنشائها.
يستخدم العنصر <script> display: none; كقيمة افتراضية.
تجاوز قيمة العرض الافتراضية
كما ذكرنا، لكل عنصر قيمة عرض افتراضية. ومع ذلك، يمكنك تجاوز هذا.
يمكن أن يكون تغيير عنصر متضمن في السطر إلى عنصر مستوى كتلة،
Override The Default Display Value :
تجاوز قيمة العرض الافتراضية
كما ذكرنا سابقًا، لكل عنصر قيمة عرض افتراضية. ومع ذلك، يمكنك تجاوز هذه القيمة.
يمكن أن يكون تغيير عنصر متضمن في السطر إلى عنصر مستوى كتلة، والعكس صحيح، مفيدًا لجعل الصفحة تبدو بطريقة معينة، مع الالتزام بمعايير الويب.
مثال شائع على ذلك هو جعل عناصر <li> متضمنة في السطر لقوائم التنقل الأفقية:
li {
display: inline;
}
ملاحظة مهمة: يؤدي تعيين خاصية العرض (display) لعنصر إلى تغيير طريقة عرض العنصر فقط، وليس نوعه. لذلك، لا يُسمح للعنصر المتضمن في السطر الذي تم تعيين خاصيته إلى display: block; باحتواء عناصر مستوى كتلة أخرى بداخله.
يوضح المثال التالي عرض عناصر <span> كعناصر مستوى كتلة:
span {
display: block;
}
يوضح المثال التالي عرض عناصر <a> كعناصر مستوى كتلة:
a {
display: block;
}
