نوفمبر 15, 2022تطبيق اذكار الصباح والمساء

معلومات حول display 

display عبارة عن طريقة لتوضيح ماسوف يتم عرضه في صفحة ال html بالاضافة الى ترتيب العناصر والمحتوى داخل صفحة html

الانواع المتوفرة في display

1-block
2-inline
3-inline-block
4-flex
5-flexbox
6-inline-flex
7-inline-flexbox
8-grid
9-table
10-inline-table
11-list-item
12-ruby
13-ruby-base
14-ruby-base-container
15-ruby-text
16-ruby-text-container
17-table-caption
18-table-cell
19-table-column
20-table-column-group
21-table-header-group
22-column-footer-groop
23-table-row
24-table-row-group
25-none
26-unset
27-flow-root

display:block

عبارة عن طريقة عرض تحتوي الخصائص التالية:
1- تبدأ في سطر جديد.
2- تحجز عرض الشاشة كاملة للعنصر.
3- تحجز الطول بالاعتماد على محتوى العنصر.
4-العنصر الذي يأتي بعدها يكون في سطر جديد ولا يكون في نفس السطر لانه محجوز كاملا.
5- يمكنك تغيير الطول والعرض.

لمعلومات اكثر مع شرح التنفيذ مع الصور والكود في الرابط التالي (شرح تفصيلي ل block)

display:inline

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

1-لاتبدأ في سطر جديد (يتم اضافة العنصر بعد العنصر السابق مباشرة).
2- تحجز العرض بالاعتماد على المحتوى.
3- تحجز الطول بالاعتماد على المحتوى.
4-العنصر الذي يأتي بعدها يكون في نفس السطر ولا يكون في سطر جديد لانه محجوز حسب محتوى العنصر فقط.
5- العنصر الذي يأتي بعدها يبدأ مبأشرة بعدها اي اذا كان هناك مساحة فارغة يبدأ فيها
6-اذا تم تجزئة العنصر فسوف يتم اعتباره كعنصر جديد وياخذ ال padding , margin الافتراضي . لانه لايمكنه تغيير قمية الطول والعرض.
7- لا تستطيع ضبط الطول والعرض اي يتم تجاهلها حتى لو اضفتها.

لمعلومات اكثر مع شرح التنفيذ مع الصور والكود في الرابط التالي (شرح تفصيلي ل inline)

display:inline-block

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

1- لا تبدأ في سطر جديد.(من خواص ال inline)
2- تحجز العرض بالاعتماد على المحتوى.(من خواص ال inline)
3- تحجز الطول بالاعتماد على المحتوى. (من خواص ال inline)
4- لا يتم تجزئة العنصر اذا تطلب تجزئة.
5- اذا كان مساحة محتوى العنصرالجديد الذي يحمل الخاصية Inline-block اكبر من المساحة الفارغة الموجودة ضمن العنصر السابق او ضمن الشاشة فالعنصر سوف يبدأ في سطر جديد.
6- اذا كان مساحة محتوى العنصر مساوية للمساحة الفارغة في الشاشة او اصغر منها فالعنصر سوف يبدأ بجانب مساحة العنصر السابق.
7- اذا تم تجزئة العنصر فسوف يتم اعتباره كعنصر واحد وطوله بعد اول مسافة اذا كان نص وعرضه حسب المحتوى .
8- يمكنك تغيير الطول والعرض.

لمعلومات اكثر مع شرح التنفيذ مع الصور والكود في الرابط التالي (شرح تفصيلي ل inline-block)

display:none

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

display:flex

عبارة عن طريقة عرض تقوم بتنسيق المحتوى بالاعتماد على الاب والذي يسمى الحاوي والابناء والذي تم تسميتهم بالعناصر

لاستخدام ال flex  يجب تحديد تاج الاب وبداخله الابناء (تفاصيل اكثر).