ما هي خاصية display؟
تُعد display واحدة من أهم خصائص CSS لأنها تحدد كيف يظهر العنصر على الصفحة، أي شكل عرضه بالنسبة للعناصر الأخرى.
أشهر القيم المستخدمة مع display:
| القيمة | الوصف |
|---|---|
block |
يعرض العنصر كـ كتلة كاملة، يأخذ كامل عرض الصفحة |
inline |
يعرض العنصر ضمن السطر بدون كسر سطر |
inline-block |
مزيج من inline و block: يبقى بالسطر لكن يسمح بتحديد عرض وارتفاع |
none |
يُخفي العنصر تمامًا |
flex |
يعرض العنصر كـ flex container (سنتحدث عنه بالتفصيل لاحقًا) |
أمثلة عملية:
1. block و inline:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
background-color: #d1e7dd;
padding: 10px;
margin-bottom: 10px;
}
span {
display: inline;
background-color: #f8d7da;
padding: 5px;
}
</style>
</head>
<body>
<p>هذا عنصر block</p>
<p>أي يأخذ سطرًا كاملًا</p>
<span>هذا عنصر inline</span>
<span>وهذا أيضًا inline</span>
</body>
</html>
2. inline-block:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 150px;
height: 100px;
background-color: #cfe2ff;
margin: 5px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
3. none:
.hidden {
display: none;
}
<p class="hidden">لن يظهر هذا النص على الصفحة</p>
استخدامات شائعة:
- إخفاء العناصر:
display: none - بناء القوائم:
display: blockأوinline-block - تصميم الأعمدة أو الصفوف:
display: flex(سنفصّله لاحقًا) - التحكم في العناصر داخل النماذج أو الأزرار.
الفرق بين visibility: hidden و display: none:
display: noneيخفي العنصر بالكامل ويزيله من التخطيط.visibility: hiddenيخفي العنصر لكنه يظل يحتجز مساحته في الصفحة.
الواجب العملي:
- أنشئ عناصر
<div>و<span>وجرب تغيير قيمdisplayبينها. - جرّب إخفاء عنصر باستخدام
display: noneثم أعده باستخدام JavaScript لاحقًا. - جرّب الفرق بين
inlineوinline-blockمن حيث التحكم في العرض والارتفاع.