display - Nouvil

شرح خاصية display

خاصية display في CSS تستخدم لتحديد كيفية عرض العناصر في صفحة الويب. تتحكم هذه الخاصية في طريقة عرض العناصر وتحديد ما إذا كانت تظهر كعنصر مرئي أو لا. تتوفر الخاصية في العديد من القيم، حيث يمكن استخدامها لتحديد العرض للعناصر المختلفة.

وفيما يلي بعض القيم الشائعة للخاصية display في CSS:

block:
تحول العنصر إلى عنصر مستقل على سطر واحد. ويتم تمديد العنصر بأكمله عرضيًا، ويمكن تحديد ارتفاع وعرض العنصر.
inline:
يحول العنصر إلى عنصر مستقل في نفس السطر ولا يمكن تحديد ارتفاع وعرض العنصر.
inline-block:
تحول العنصر إلى عنصر مستقل في نفس السطر ويمكن تحديد ارتفاع وعرض العنصر.
none:
يجعل العنصر غير مرئي ويتم إخفاؤه تمامًا من الصفحة.
flex:
تستخدم لتحديد عرض وارتفاع العناصر في الصفحة وتنظيمها في صفوف وأعمدة.
grid:
تستخدم لتحديد عرض وارتفاع العناصر في الصفحة وتنظيمها في صفوف وأعمدة.

يمكن استخدام خاصية display لتحديد كيفية عرض العناصر في صفحة الويب، واختيار القيمة المناسبة للعنصر المحدد. يمكن أيضًا استخدام قيم متعددة معًا لتحديد العرض للعنصر بشكل أفضل.LikeDislikeShare

شرح خاصية display block

خاصية display block تحول العنصر إلى عنصر مستقل على سطر واحد، ويتم تمديد العنصر بأكمله عرضيًا. يمكن تحديد ارتفاع وعرض العنصر باستخدام خاصية العرض والارتفاع في CSS.

وفيما يلي بعض الأمثلة على استخدام خاصية display block في CSS:

تحديد ارتفاع وعرض العنصر:

div {
  display: block;
  width: 200px;
  height: 100px;
}

في هذا المثال، تم تحديد العرض والارتفاع للعنصر div باستخدام خاصية العرض والارتفاع، كما تم تحويل div إلى عنصر مستقل على سطر واحد باستخدام خاصية display block.

عرض النص في عنصر block:

p {
  display: block;
}

في هذا المثال، تم تحويل النص داخل العنصر p إلى عنصر مستقل على سطر واحد بواسطة خاصية display block.

تحديد مساحة العنصر block بشكل كامل:

div {
  display: block;
  margin: 0;
  padding: 0;
}

في هذا المثال، تم تحديد مساحة العنصر div بشكل كامل بواسطة تعيين قيمة الهامش (margin) والحشو (padding) للصفر.

يمكن استخدام خاصية display block لتحديد عرض وارتفاع العناصر في صفحة الويب وجعل العنصر مستقلاً على سطر واحد. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

شرح خاصية display inline

خاصية display inline تحول العنصر إلى عنصر مستقل في نفس السطر، ولا يمكن تحديد ارتفاع وعرض العنصر باستخدام هذه الخاصية. يتم عرض العنصر بأقصى عرض ممكن دون تغيير السطر.

وفيما يلي بعض الأمثلة على استخدام خاصية display inline في CSS:

تحويل العنصر إلى عنصر inline:

span {
  display: inline;
}

في هذا المثال، تم تحويل العنصر span إلى عنصر مستقل في نفس السطر بواسطة خاصية display inline.

عرض الصور كعنصر inline:

img {
  display: inline;
}

في هذا المثال، تم تحويل عناصر الصور إلى عناصر مستقلة في نفس السطر بواسطة خاصية display inline.

عرض الروابط كعنصر inline:

a {
  display: inline;
}

في هذا المثال، تم تحويل الروابط إلى عناصر مستقلة في نفس السطر بواسطة خاصية display inline.

يمكن استخدام خاصية display inline لجعل العنصر مستقلاً في نفس السطر، وتستخدم عادة في عناصر النصوص والصور والروابط. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

شرح خاصية display inline-block

خاصية display inline-block تحول العنصر إلى عنصر مستقل في نفس السطر، ويمكن تحديد ارتفاع وعرض العنصر باستخدام هذه الخاصية. يتم عرض العنصر بأقصى عرض ممكن بدون تغيير السطر ويمكن تعيين ارتفاع وعرض العنصر.

وفيما يلي بعض الأمثلة على استخدام خاصية display inline-block في CSS:

تحويل العنصر إلى عنصر inline-block:

div {
  display: inline-block;
}

في هذا المثال، تم تحويل العنصر div إلى عنصر مستقل في نفس السطر بواسطة خاصية display inline-block.

تحديد ارتفاع وعرض العنصر inline-block:

span {
  display: inline-block;
  width: 200px;
  height: 100px;
}

في هذا المثال، تم تحديد العرض والارتفاع للعنصر span باستخدام خاصية العرض والارتفاع، كما تم تحويل span إلى عنصر مستقل في نفس السطر باستخدام خاصية display inline-block.

عرض الصور كعنصر inline-block:

img {
  display: inline-block;
  width: 200px;
  height: 100px;
}

في هذا المثال، تم تحديد العرض والارتفاع للصور باستخدام خاصية العرض والارتفاع، كما تم تحويل صور العنصر إلى عناصر مستقلة في نفس السطر باستخدام خاصية display inline-block.

يمكن استخدام خاصية display inline-block لجعل العنصر مستقلاً في نفس السطر وتحديد ارتفاع وعرض العنصر، وتستخدم عادة في عناصر النصوص والصور والروابط. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

شرح خاصية display none

خاصية display none تخفي العنصر بالكامل ولا يتم عرضه في الصفحة. ويتم استخدام هذه الخاصية عادة في حالة رغبة المستخدم في إخفاء العنصر بشكل مؤقت أو دائم.

وفيما يلي بعض الأمثلة على استخدام خاصية display none في CSS:

إخفاء عنصر مؤقتًا:

div {
  display: none;
}

في هذا المثال، تم إخفاء العنصر div مؤقتًا باستخدام خاصية display none.

إخفاء صورة مؤقتًا:

img {
  display: none;
}

في هذا المثال، تم إخفاء الصورة مؤقتًا باستخدام خاصية display none.

إخفاء عنصر دائمًا:

h1 {
  display: none;
}

في هذا المثال، تم إخفاء العنصر h1 دائمًا باستخدام خاصية display none.

يمكن استخدام خاصية display none لإخفاء العنصر بشكل مؤقت أو دائم، وتستخدم عادة في حالة رغبة المستخدم في إخفاء العنصر بشكل مؤقت أو لإخفاء عناصر غير مرغوب فيها. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

شرح خاصية display flex

خاصية display flex تحول العنصر إلى عنصر مرن، ويتم ترتيب عناصر العنصر الأساسي بشكل مرن وفقًا للتوجيهات المحددة. يتم استخدام هذه الخاصية عادة في تصميمات الويب الحديثة لتحقيق تنظيم أفضل للعناصر.

وفيما يلي بعض الأمثلة على استخدام خاصية display flex في CSS:

تحويل العنصر إلى عنصر مرن:

div {
  display: flex;
}

في هذا المثال، تم تحويل العنصر div إلى عنصر مرن باستخدام خاصية display flex.

ترتيب عناصر العنصر الأساسي بشكل مرن:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

في هذا المثال، تم تحويل العنصر .container إلى عنصر مرن باستخدام خاصية display flex، وتم تحديد توجيه العناصر باستخدام خاصية flex-direction، وتم تحديد التوزيع الأفقي للعناصر باستخدام خاصية justify-content.

تحويل العنصر إلى صفحة واحدة:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

في هذا المثال، تم تحويل العنصر body إلى عنصر مرن باستخدام خاصية display flex، وتم تحديد الارتفاع الأدنى للعنصر باستخدام خاصية min-height، وتم تحديد توجيه العناصر باستخدام خاصية flex-direction.

يمكن استخدام خاصية display flex لتحويل العنصر إلى عنصر مرن وترتيب عناصر العنصر الأساسي بشكل مرن، وتستخدم عادة في تصميمات الويب الحديثة لتحقيق تنظيم أفضل للعناصر. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

شرح خاصية display grid

خاصية display grid تحول العنصر إلى عنصر شبكي، وتسمح بترتيب العناصر بشكل محكم في الصفحة. تستخدم هذه الخاصية عادة في تصميمات الويب الحديثة لتحقيق تنظيم أفضل للعناصر.

وفيما يلي بعض الأمثلة على استخدام خاصية display grid في CSS:

تحويل العنصر إلى عنصر شبكي:

.container {
  display: grid;
}

في هذا المثال، تم تحويل العنصر .container إلى عنصر شبكي باستخدام خاصية display grid.

تحديد تخطيط العنصر الشبكي:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

ترتيب العناصر في عنصر شبكي:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-gap: 20px;
}
.item {
  grid-column: 1 / 3;
  grid-row: 2;
}

في هذا المثال، تم تحويل العنصر .container إلى عنصر شبكي باستخدام خاصية display grid، وتم تحديد تخطيط العنصر الشبكي باستخدام خاصيتي grid-template-columns و grid-template-rows، وتم تحديد الفجوة بين العناصر باستخدام خاصية grid-gap، وتم ترتيب العنصر .item في الصفحة باستخدام خاصيتي grid-column و grid-row.

يمكن استخدام خاصية display grid لتحويل العنصر إلى عنصر شبكي وترتيب العناصر بشكل محكم في الصفحة، وتستخدم عادة في تصميمات الويب الحديثة لتحقيق تنظيم أفضل للعناصر. يجب استخدام هذه الخاصية بحذر، حيث يمكن أن تؤثر على ترتيب العناصر في الصفحة.

السابق التالي