شرح تفصيلي disblay | block |css

display block css


block: عبارة عن طريقة عرض تحتوي الخصائص التالية:

1- تبدأ في سطر جديد.

2- تحجز عرض الشاشة كاملة للعنصر.

3- تحجز الطول بالاعتماد على محتوى العنصر.

4-العنصر الذي يأتي بعدها يكون في سطر جديد ولا يكون في نفس السطر لانه محجوز كاملا.

5- يمكنك تغيير الطول والعرض.

المثال

HTML Code
<div class="element-div-block1">
        adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
        repellat itaque commodi est non fugiat eaque adipisci quos incidunt,
        quisquam praesentium, sit quaerat amet.
    </div>

    <div class="element-div-block2">
    adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
    repellat itaque commodi est non fugiat eaque adipisci
     </div>
     
    <div class="element-div-block3">
        adipisicing        elit. Eveniet ea nisi, ut nulla facilis atque
        repellat itaque commodi est non fugiat eaque adipisci quos incidunt,
        quisquam praesentium, sit quaerat amet.
    </div>
Css Code
.element-div-block1 {
display:block;
color: black;
background-color: burlywood;
}
.element-div-block2 {
display:block;
color: black;
background-color: rgb(222, 135, 135);
}
.element-div-block3 {
display:block;
color: black;
background-color: rgb(150, 135, 222);
}


النتيجة



تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -