خاصية عرض CSS

كيفية العمل معdisplayالممتلكات في CSS

الdisplayتحدد خاصية الكائن كيفية عرضه بواسطة المستعرض.

إنها خاصية مهمة جدًا ، وربما الخاصية التي تحتوي على أكبر عدد من القيم التي يمكنك استخدامها.

هذه القيم تشمل:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(وجميع الtable-*واحد)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

بالإضافة إلى آخرين لن تستخدمها على الأرجح ، مثلruby.

سيؤدي اختيار أي من هؤلاء إلى تغيير كبير في سلوك المتصفح بالعنصر وتوابعه.

في هذا المنشور ، سأحلل أهم العناصر التي لم يتم تناولها في مكان آخر:

  • block
  • inline
  • inline-block
  • none

أغطي الآخرين في مشاركات منفصلة:

inline

Inline هي قيمة العرض الافتراضية لكل عنصر في CSS.

يتم عرض جميع علامات HTML مضمنة خارج المربع باستثناء بعض العناصر مثلdivوpوsection، والتي تم تعيينها كـblockبواسطة وكيل المستخدم (المتصفح).

لا يتم تطبيق أي هامش أو مساحة للعناصر المضمنة.

نفس الشيء بالنسبة للارتفاع والعرض.

أنتعلبةقم بإضافتها ، لكن المظهر في الصفحة لن يتغير - يتم حسابها وتطبيقها تلقائيًا بواسطة المستعرض.

inline-block

مشابه لinline، ولكن معinline-block widthوheightيتم تطبيقها على النحو الذي حددته.

block

كما ذكرنا ، عادةً ما يتم عرض العناصر بشكل مضمّن ، باستثناء بعض العناصر ، بما في ذلك

  • div
  • p
  • section
  • ul

التي تم تعيينها كـblockبواسطة المتصفح.

معdisplay: block، يتم تكديس العناصر الواحدة تلو الأخرى رأسياً ، ويشغل كل عنصر 100٪ من الصفحة.

القيم المخصصة لملفwidthوheightيتم احترام الخصائص ، إذا قمت بتعيينها ، جنبًا إلى جنب معmarginوpadding.

none

استخدامdisplay: noneيجعل عنصرًا يختفي. لا يزال موجودًا في HTML ، ولكنه غير مرئي في المتصفح.

تحميل مجانيكتيب CSS


المزيد من دروس css: