CSS تخطيط - وعرض الملكية

و display الممتلكات هي ملك CSS أهم لمراقبة تخطيط.

عرض الملكية

و display الخاصية تحديد إذا / كيف يتم عرض عنصر.

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

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

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

وعلى غرار ذلك مع CSS، ونحن نستخدم جافا سكريبت لإظهار أنه (تغييره إلى ( display: block ).

عناصر مستوى الكتلة

وثمة عنصر على مستوى الكتلة يبدأ دائما على سطر جديد ويستغرق العرض الكامل المتاحة (تمتد إلى اليمين واليسار بقدر ما يمكن).

و <div> العنصر هو عنصر على مستوى الكتلة.

أمثلة من العناصر على مستوى الكتلة:

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

مضمنة عناصر

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

هذا هو مضمنة <span> العنصر داخل الفقرة.

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

<span>
<a>
<img>

عرض: لا شيء؛

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

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

تجاوز العرض الافتراضي القيمة

كما ذكرنا، كل عنصر له قيمة العرض الافتراضي. ومع ذلك، يمكنك تجاوز هذا.

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

ومن الأمثلة الشائعة تبذل مضمنة <li> عناصر القوائم الأفقية:

مثال

li {
display: inline;
}

انها محاولة لنفسك »

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