طرح‌بندی CSS - ویژگی display

display خصائص display هي أكثر خصائص CSS أهمية لتحكم التخطيط.

خصائص display

display يحدد ما إذا كان العنصر سيظهر أم لا وكيف سيظهر.

كل عنصر HTML له قيمة افتراضية لـ display تعتمد على نوع العنصر. القيمة الافتراضية لمعظم العناصر هي block أو inline.

انقر لعرض اللوحة

هذا اللوحة يحتوي على عنصر <div>، وهو م隐蔽 بشكل افتراضي.（display: none)

يتم تعيينه بنمط CSS، ونستخدم JavaScript لعرضه. (تغيير إلى display: block)

العناصر المكعبة (block element)

العناصر المكعبة تبدأ دائمًا في سطر جديد، وتأخذ كل عرض متاح (تقريبًا يوسع إلى اليمين واليسار).

عنصر <div> هذا هو عنصر مكعب.

بعض أمثلة العناصر المكعبة:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

العناصر السلسة (inline element)

العناصر السلسة لا تبدأ في سطر جديد، وتأخذ فقط العرض المطلوب.

هذا هو الجملةعنصر <span> سلس.

بعض أمثلة العناصر السلسة:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; يستخدم عادة مع JavaScript لتمكين إخفاء العناصر وعرضها دون حذف وإعادة إنشاء العناصر. إذا كنت تريد معرفة كيفية تحقيق هذا الهدف، فانظر إلى المثال الأخير في هذه الصفحة.

بشكل افتراضي،<script> العناصر تستخدم display: none;.

تغيير القيمة الافتراضية لـ Display

كما ذكرنا سابقًا، كل عنصر له قيمة افتراضية لـ display. ولكن يمكنك تغييرها.

تغيير العناصر السلسة إلى مكعبة والعكس صحيح، يمكن أن يكون مفيدًا جدًا لتحقيق عرض صفحة معين بينما يتبع معايير الويب.

مثال شائع هو إنشاء عناصر سلسة لإنشاء قائمة مستوية. <li> العنصر:

مثال

li {
  display: inline;
}

تجربة شخصية

ملاحظة:إعداد سمة العرض display سوف يغير فقططريقة عرض العنصرولن يغير نوع العنصر. display: block; العناصر السلسة لا تسمح باستخدام العناصر المكعبية داخلها.

في المثال التالي، سيتم عرض عنصر <span> كعنصر مكعب:

مثال

span {
  display: block;
}

تجربة شخصية

في المثال التالي، سيتم عرض عنصر <a> كعنصر مكعب:

مثال

a {
  display: block;
}

تجربة شخصية

إخفاء العنصر - display:none أم visibility:hidden؟

display:none

visibility: hidden

إعادة تعيين

من خلال وضع display تم تعيين السمة لا شيء يمكن إخفاء العنصر. العنصر سيتم إخفاءه، وسيبدو الصفحة وكأن العنصر غير موجود:

مثال

h1.hidden {
  display: none;
}

تجربة شخصية

visibility: hidden; يمكن إخفاء العنصر أيضًا.

لكن، العنصر سوف يستمر في الاستخدام نفس المساحة التي كان يستخدمها من قبل. العنصر سيتم إخفاءه، ولكن سيفقد تأثيره على التخطيط:

مثال

h1.hidden {
  visibility: hidden;
}

تجربة شخصية

مزيد من الأمثلة

الفرق بين display: none; و visibility: hidden;
مثال على display: none; مقابل visibility: hidden;
استخدام CSS وJavaScript معًا لعرض المحتوى
هذا المثال يوضح كيفية عرض العنصر باستخدام CSS وJavaScript عند النقر.

خصائص عرض/وضوح CSS

خصائص وصف
display تحديد كيفية عرض العنصر.
visibility تحديد ما إذا كان يجب أن يكون العنصر مرئيًا أم لا.