السلام عليكم
خاصيه Display وتعنى طريقه عرض العنصـر فى صفحـه البراوزر
وللخـاصيه 4 قيــم :
الاولى : none وتعنى اخفاء العنصر تماما من الصفحه
الثانية : inline بمعنى ان تقوم العناصر المعطى لهم هذه القيم بالمجىء بجانب بعضهم البعض
الثالثه : block بمعنى العناصر تيجـى تحت بعض
الرابعه : inline-block وهى دمج ميزه من ال inline و block
دعنى نتطرق بشرح أكثر دقه وتفصيلا وبأمثله لكل قيـمة
1) القيمــة none وتعنى اخفـاء العنصـر تماما من الصفحه وما يلى هذا العنصر يأتى مكانه
شاهد هذا المثـال لتفهم ما اقصد بالتفصيـل
http://codepen.io/anon/pen/...2) القيـمة inline وتعنى ان العنـاصر تاتى بجوار بعضها البعض فى نفس السطر
مع مراعااااة !! ان العنـاصر ال inline لا يمكن أبداً اعطائها الاتى :
width
height
margin-top
margin-bottom
padding-top
padding-bottom ف بعض الاحيـان تعمل
اما بالنسبه ل margin-right و margin-left و padding-right و padding-left
يعملان مع قيمـة inline
دعنى نرى المثـال وستفهم بالتفصيل ما اقصد ( غير القيم وستشاهد التاثير )
http://codepen.io/anon/pen/...3) القيمة block وتعنى ان العناصر تاتى تحت بعضها البعض ... قبلها وبعدها
مع مراعاااه !! ان العناصر ال block عكس ال inline تماما
يمكنك اعطائها :
width
height
margin من جميع الجوانب
padding من جميع الجوانب
مع العلم انه فى حين عدم اعطائك للعنصر width معين .. يكون ال width دائما 100%
شاهد المثال
http://codepen.io/anon/pen/...وهذا هو الفرق بين العناصر ال block و inline
هو انه يمكن اعطاء طول عرض ومارجين وبادينج للعناصر البلوك فى حين لا يمكن للعناصر ال inline
كما ذكرت مسبقــااا
سؤال يمكن الاستفسار عنه وهو كيف اعرف العناصر block أم inline بدون حفظها ؟
ببساطه شديده جداا .. عن طريق ال background بمعنى
لو اعطيب العنصر background معينه وتاثيرها كان انها خدت ال width 100% مثل ذلك
فاعلم ان هذه العنصر هو عنصر block ... مثال على heading tag شاهد المثال ↓
http://codepen.io/anon/pen/...سترى ان الخلفيه جااااءت بعرض الشاشه تمااما لهذه العناصر مع العلم انى لم اعطى عرض معين
فى ذلك الحين تعلم انه هذه العناصر block
على عكس ال inline .. ايضا تقوم باعطاء العناصر المراد معرفته هل هو inline ام block
خاصيه ال background .. لكن فى هذا الحاله لو جاءت لون الخلفيه على الكلام المكتوب
فقط بدون ان تاخد عرض الشاشه كاملا .. فهذه العناصر تكون inline
شاهد المثال
http://codepen.io/anon/pen/...سترى ان الخلفيه جاءت على قد المحتوى المكتوب داخل التاج فقط
مما يعنى ان هذه العناصر تكون inline
4) القيمه الاخيرة وهى inline-block
تعنى ادماج مميزات القيمه inline ومميزات القيمه block
فميزة ال inline ان العناصر تيجى بجوار بعضها البعض
وميزة ال block ان العناصر تقدر تتحكم فى الطول والعرض والمارجين والبادينج
لكل كل قيمه على حده لا تفعل ذلك ..
واشهر مثال على هذا القيمه هو النافبـار .. شاهد المثال
http://codepen.io/anon/pen/...وجدنا انه عند اعطاء القيمه inline-block جاءت جميع ال li بجوار بعضها البعض
بالاضافه الى انه استطعنا التحكم فى الطول والعرض والمارجين والبادينج
وهذا لا يحدث باسخدام كل خاصيه على حده
يمكنك تحويل العناصر بمعنى مثلا عندك 3 div وهما عناصر بلوك
اذا اردت تحويلهم الى عناصر inline فقم بكتابه خاصيه ال display : inline للديف
حينها بتحول من عنصر بلوك الى inline والعكس صحيح
الى هنا تم الانتهاء تماما من هذا الخاصيـة
اتمنى يكون الشرح واضح وكافى ... ويكون مفيد ليكم وجزاكم الله خيرا والسلام عليكم ورحمه الله
التعليقات