السلام عليكم
خاصيه Display وتعنى طريقه عرض العنصـر فى صفحـه البراوزر
وللخـاصيه 4 قيــم :
الاولى : none وتعنى اخفاء العنصر تماما من الصفحه
الثانية : inline بمعنى ان تقوم العناصر المعطى لهم هذه القيم بالمجىء بجانب بعضهم البعض
الثالثه : block بمعنى العناصر تيجـى تحت بعض
الرابعه : inline-block وهى دمج ميزه من ال inline و block
دعنى نتطرق بشرح أكثر دقه وتفصيلا وبأمثله لكل قيـمة
1) القيمــة none وتعنى اخفـاء العنصـر تماما من الصفحه وما يلى هذا العنصر يأتى مكانه
شاهد هذا المثـال لتفهم ما اقصد بالتفصيـل
http://ift.tt/2aZitbh
2) القيـمة inline وتعنى ان العنـاصر تاتى بجوار بعضها البعض فى نفس السطر
مع مراعااااة !! ان العنـاصر ال inline لا يمكن أبداً اعطائها الاتى :
width
height
margin-top
margin-bottom
padding-top
padding-bottom ف بعض الاحيـان تعمل
اما بالنسبه ل margin-right و margin-left و padding-right و padding-left
يعملان مع قيمـة inline
دعنى نرى المثـال وستفهم بالتفصيل ما اقصد ( غير القيم وستشاهد التاثير )
http://ift.tt/2aeLmmm
3) القيمة block وتعنى ان العناصر تاتى تحت بعضها البعض ... قبلها وبعدها
مع مراعاااه !! ان العناصر ال block عكس ال inline تماما
يمكنك اعطائها :
width
height
margin من جميع الجوانب
padding من جميع الجوانب
مع العلم انه فى حين عدم اعطائك للعنصر width معين .. يكون ال width دائما 100%
شاهد المثال http://ift.tt/2aZjjoe
وهذا هو الفرق بين العناصر ال block و inline
هو انه يمكن اعطاء طول عرض ومارجين وبادينج للعناصر البلوك فى حين لا يمكن للعناصر ال inline
كما ذكرت مسبقــااا
سؤال يمكن الاستفسار عنه وهو كيف اعرف العناصر block أم inline بدون حفظها ؟
ببساطه شديده جداا .. عن طريق ال background بمعنى
لو اعطيب العنصر background معينه وتاثيرها كان انها خدت ال width 100% مثل ذلك
فاعلم ان هذه العنصر هو عنصر block ... مثال على heading tag شاهد المثال ↓
http://ift.tt/2aeLcLS
سترى ان الخلفيه جااااءت بعرض الشاشه تمااما لهذه العناصر مع العلم انى لم اعطى عرض معين
فى ذلك الحين تعلم انه هذه العناصر block
على عكس ال inline .. ايضا تقوم باعطاء العناصر المراد معرفته هل هو inline ام block
خاصيه ال background .. لكن فى هذا الحاله لو جاءت لون الخلفيه على الكلام المكتوب
فقط بدون ان تاخد عرض الشاشه كاملا .. فهذه العناصر تكون inline
شاهد المثال http://ift.tt/2aZjose
سترى ان الخلفيه جاءت على قد المحتوى المكتوب داخل التاج فقط
مما يعنى ان هذه العناصر تكون inline
4) القيمه الاخيرة وهى inline-block
تعنى ادماج مميزات القيمه inline ومميزات القيمه block
فميزة ال inline ان العناصر تيجى بجوار بعضها البعض
وميزة ال block ان العناصر تقدر تتحكم فى الطول والعرض والمارجين والبادينج
لكل كل قيمه على حده لا تفعل ذلك ..
واشهر مثال على هذا القيمه هو النافبـار .. شاهد المثال
http://ift.tt/2aeL3bt
وجدنا انه عند اعطاء القيمه inline-block جاءت جميع ال li بجوار بعضها البعض
بالاضافه الى انه استطعنا التحكم فى الطول والعرض والمارجين والبادينج
وهذا لا يحدث باسخدام كل خاصيه على حده
يمكنك تحويل العناصر بمعنى مثلا عندك 3 div وهما عناصر بلوك
اذا اردت تحويلهم الى عناصر inline فقم بكتابه خاصيه ال display : inline للديف
حينها بتحول من عنصر بلوك الى inline والعكس صحيح
الى هنا تم الانتهاء تماما من هذا الخاصيـة
اتمنى يكون الشرح واضح وكافى ... ويكون مفيد ليكم وجزاكم الله خيرا والسلام عليكم ورحمه الله
from حسوب I/O - الأكثر شيوعاً http://ift.tt/2aZj9xb
ليست هناك تعليقات:
إرسال تعليق
دائماً، رأيكم يهمنا،