أولاً: خاصية display
تحدد كيف يظهر العنصر في الصفحة.
القيم الشائعة:
1. block (عنصر كتلي)
- يأخذ العرض كاملاً.
- يبدأ في سطر جديد.
div {
display: block;
}
2. inline (عنصر سطري)
- لا يبدأ في سطر جديد.
- يأخذ فقط المساحة التي يحتاجها.
span {
display: inline;
}
3. inline-block
- مثل
inlineلكنه يسمح بتحديد العرض والطول.
button {
display: inline-block;
}
4. none
- يخفي العنصر كليًا ولا يترك له مساحة.
p {
display: none;
}
ثانياً: خاصية visibility
تتحكم في ظهور العنصر مع إبقاء مكانه في الصفحة.
h1 {
visibility: hidden;
}
الفرق بين display: none و visibility: hidden:
| الخاصية | التأثير |
|---|---|
display: none |
العنصر يختفي تمامًا ولا يحجز مساحة |
visibility: hidden |
العنصر يختفي ولكن تبقى مساحته موجودة |
ثالثاً: مثال توضيحي
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px 0;
}
.hidden-box {
visibility: hidden;
}
.none-box {
display: none;
}
</style>
</head>
<body>
<div class="box">هذا صندوق ظاهر</div>
<div class="box hidden-box">هذا صندوق غير مرئي ولكن يحتل مساحة</div>
<div class="box none-box">هذا صندوق مختفٍ بالكامل ولا يشغل مساحة</div>
<div class="box">صندوق آخر بعد الصناديق المختفية</div>
</body>
</html>
رابعاً: خاصية display لتغيير السلوك الافتراضي
li {
display: inline;
}
- يجعل عناصر القائمة تظهر في سطر واحد.
خامساً: استخدام display: flex و grid
- سنتناول هذه القيم لاحقًا في دروس متقدمة لتصميم التخطيطات.
الواجب العملي:
- أنشئ عدة عناصر (
div,span,li) وجرّب تغييرdisplayلكل منها. - أنشئ عنصرًا يخفي باستخدام
display: noneوآخر بـvisibility: hiddenولاحظ الفرق.
