خاصية العرض ونموذج التنسيق المرئي

فهم نموذج التنسيق المرئي

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

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

عناصر مستوى الكتلة

عناصر مستوى الكتلة هي العناصر الهيكلية الأساسية في HTML. بشكل افتراضي، يبدأ عنصر مستوى الكتلة على سطر جديد ويمتد ليملأ العرض الكامل لعنصره الحاوي. تتراكم عناصر الكتلة عموديا واحدة فوق الأخرى، مما ينشئ التدفق الطبيعي من أعلى إلى أسفل للمستند. تشمل عناصر مستوى الكتلة الشائعة <div> و<p> و<h1> إلى <h6> و<section> و<article> و<header> و<footer> و<ul> و<ol> و<li>.

الخصائص الرئيسية لعناصر مستوى الكتلة:

• تبدأ دائما على سطر جديد بغض النظر عن المساحة المتبقية على السطر الحالي.
• تتوسع لتملأ 100% من عرض الحاوية الأم افتراضيا.
• يمكنك تعيين قيم width وheight صريحة عليها.
• الهوامش العمودية (margin-top وmargin-bottom) تعمل كما هو متوقع.
• الهوامش الأفقية (margin-left وmargin-right) تعمل كما هو متوقع، وmargin: 0 auto يمكن استخدامه للتوسيط الأفقي.
• الحشوة تعمل في جميع الاتجاهات الأربعة وتؤثر على الحجم الإجمالي للعنصر.
• الهوامش العمودية المتجاورة تنهار -- الهامش الأكبر يفوز بدلا من تطبيق كليهما.

<style>
    .block-demo div {
        background-color: #e3f2fd;
        border: 2px solid #1976d2;
        padding: 16px;
        margin-bottom: 8px;
    }
    .narrow-block {
        width: 300px;
        /* حتى مع تعيين العرض، يبدأ العنصر على سطر جديد */
    }
</style>

<div class="block-demo">
    <div>أنا عنصر كتلة. أشغل العرض الكامل.</div>
    <div>أبدأ على سطر جديد أسفل الكتلة الأولى.</div>
    <div class="narrow-block">لدي width: 300px لكنني أبدأ على سطر جديد.</div>
    <div>المساحة المتبقية بجانب الكتلة الضيقة فارغة.</div>
</div>

العناصر المضمنة

تتدفق العناصر المضمنة داخل المحتوى النصي للمستند. لا تبدأ على سطر جديد -- بدلا من ذلك، تجلس بجانب العناصر المضمنة الأخرى والنص على نفس السطر، وتتدفق من اليسار إلى اليمين (في اللغات من اليسار إلى اليمين) وتلتف إلى السطر التالي فقط عند استنفاد العرض المتاح. تشمل العناصر المضمنة الشائعة <span> و<a> و<strong> و<em> و<code> و<img> و<br> و<input>.

الخصائص الرئيسية للعناصر المضمنة:

• لا تبدأ على سطر جديد -- تتدفق مع النص والعناصر المحيطة.
• تعيين width وheight ليس له تأثير على العناصر المضمنة غير المستبدلة.
• الحشوة الأفقية (padding-left وpadding-right) تعمل وتؤثر على التخطيط.
• الحشوة العمودية (padding-top وpadding-bottom) تُطبق بصريا لكنها لا تدفع الأسطر الأخرى بعيدا -- وقد تتداخل مع المحتوى المجاور.
• الهوامش الأفقية (margin-left وmargin-right) تعمل كما هو متوقع.
• الهوامش العمودية (margin-top وmargin-bottom) ليس لها تأثير على العناصر المضمنة غير المستبدلة.
• حجم العنصر يتحدد بالكامل بمحتواه.

<style>
    .inline-demo span {
        background-color: #fff3e0;
        border: 2px solid #e65100;
        padding: 4px 8px;
        margin: 20px 8px; /* فقط الهوامش الأفقية تُطبق */
    }
    .inline-no-effect {
        width: 500px;  /* لا تأثير على العناصر المضمنة */
        height: 200px; /* لا تأثير على العناصر المضمنة */
    }
</style>

<p class="inline-demo">
    هذا نص عادي مع
    <span>عنصر span مضمن</span>
    يتدفق داخل الفقرة.
    <span class="inline-no-effect">العرض والارتفاع يُتجاهلان.</span>
    النص يستمر على نفس السطر.
</p>

الكتلة المضمنة: النهج الهجين

قيمة display: inline-block تجمع بين خصائص كل من عناصر الكتلة والعناصر المضمنة. عنصر الكتلة المضمنة يتدفق مع المحتوى المحيط (مثل العنصر المضمن) لكنه يقبل العرض والارتفاع والهامش/الحشوة العمودية (مثل عنصر الكتلة). هذا يجعله مفيدا للغاية لإنشاء تخطيطات أفقية من صناديق محددة الحجم دون اللجوء إلى الطفو أو Flexbox.

الخصائص الرئيسية لعناصر الكتلة المضمنة:

• تتدفق بشكل مضمن -- تجلس بجانب عناصر مضمنة أو كتل مضمنة أخرى على نفس السطر.
• يمكنك تعيين قيم width وheight صريحة.
• الهوامش والحشوة العمودية تعمل بشكل صحيح وتؤثر على التخطيط المحيط.
• تحترم text-align على العنصر الأب للموضع الأفقي.
• تتأثر بالمسافات البيضاء في مصدر HTML (المسافات بين العناصر تنشئ فجوات صغيرة).
• تتم محاذاتها عموديا مع النص المحيط باستخدام vertical-align.

<style>
    /* تنقل أفقي باستخدام inline-block */
    .nav-inline a {
        display: inline-block;
        padding: 12px 24px;
        background-color: #1976d2;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        margin-right: 4px;
    }

    /* تخطيط بطاقات باستخدام inline-block */
    .card-grid {
        text-align: center; /* يوسط أبناء inline-block */
        font-size: 0; /* يزيل فجوات المسافات البيضاء */
    }
    .card-grid .card {
        display: inline-block;
        width: 250px;
        vertical-align: top;
        text-align: right;
        font-size: 16px; /* استعادة حجم الخط */
        margin: 8px;
        padding: 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
</style>

<nav class="nav-inline">
    <a href="#">الرئيسية</a>
    <a href="#">من نحن</a>
    <a href="#">الخدمات</a>
    <a href="#">اتصل بنا</a>
</nav>

<div class="card-grid">
    <div class="card">محتوى البطاقة 1</div>
    <div class="card">البطاقة 2 بمحتوى أكثر يلتف على عدة أسطر</div>
    <div class="card">محتوى البطاقة 3</div>
</div>

display: none مقابل visibility: hidden مقابل opacity: 0

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

• display: none -- يزيل العنصر تماما من التخطيط. لا يشغل مساحة وغير مرئي ويُزال من شجرة إمكانية الوصول. قارئات الشاشة لا تستطيع الوصول إليه. العنصر لا يستجيب للأحداث.
• visibility: hidden -- يخفي العنصر بصريا لكنه لا يزال يشغل مساحة في التخطيط. العنصر غير المرئي يشغل موقعه وحجمه الطبيعي تاركا فجوة مرئية. يُزال من شجرة إمكانية الوصول. العنصر لا يستجيب لمعظم الأحداث (لكن مساحته لا تزال تمنع النقرات على العناصر خلفه).
• opacity: 0 -- يجعل العنصر شفافا تماما لكنه لا يزال يشغل مساحة في التخطيط ويبقى في شجرة إمكانية الوصول. العنصر لا يزال يستقبل النقرات والأحداث الأخرى. قارئات الشاشة لا تزال تستطيع الوصول إليه.

<style>
    .container {
        display: flex;
        gap: 10px;
        padding: 20px;
        background-color: #f5f5f5;
    }
    .box {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    .box-a { background-color: #e74c3c; }
    .box-b { background-color: #3498db; }
    .box-c { background-color: #2ecc71; }

    /* display: none -- العنصر يُزال تماما من التخطيط */
    .hidden-display { display: none; }

    /* visibility: hidden -- العنصر غير مرئي لكنه يحتفظ بمساحته */
    .hidden-visibility { visibility: hidden; }

    /* opacity: 0 -- العنصر شفاف لكنه لا يزال تفاعليا */
    .hidden-opacity { opacity: 0; }
</style>

<!-- مثال display: none -->
<div class="container">
    <div class="box box-a">أ</div>
    <div class="box box-b hidden-display">ب</div>
    <div class="box box-c">ج</div>
    <!-- الصندوق ج ينتقل بجانب أ. لا فجوة حيث كان ب. -->
</div>

<!-- مثال visibility: hidden -->
<div class="container">
    <div class="box box-a">أ</div>
    <div class="box box-b hidden-visibility">ب</div>
    <div class="box box-c">ج</div>
    <!-- هناك فجوة مرئية حيث يوجد ب. ج يبقى في مكانه. -->
</div>

<!-- مثال opacity: 0 -->
<div class="container">
    <div class="box box-a">أ</div>
    <div class="box box-b hidden-opacity">ب</div>
    <div class="box box-c">ج</div>
    <!-- الفجوة موجودة مثل visibility:hidden، لكن ب لا يزال قابلا للنقر. -->
</div>

عند الاختيار بين هذه التقنيات، ضع في اعتبارك متطلباتك: استخدم display: none عندما يجب أن يكون العنصر غائبا تماما عن التخطيط وغير قابل للوصول; استخدم visibility: hidden عندما تحتاج للحفاظ على مساحة التخطيط لكن إخفاء العنصر; استخدم opacity: 0 عندما تريد انتقالات تلاشي سلسة (لأن opacity قابل للتحريك لكن display و visibility لا يمكن نقلهما بسلاسة).

display: contents

قيمة display: contents هي نوع عرض فريد ومربك أحيانا. عند تطبيقها على عنصر، تتسبب في اختفاء صندوق ذلك العنصر من التخطيط -- كما لو أن العنصر نفسه غير موجود -- بينما يُرقى أبناؤه ويُنسقون كما لو كانوا أبناء مباشرين لأب العنصر. العنصر لا يزال موجودا في DOM وشجرة إمكانية الوصول، لكنه لا ينشئ صندوقا خاصا به.

<style>
    .flex-parent {
        display: flex;
        gap: 16px;
        padding: 16px;
        background-color: #f0f0f0;
    }
    .wrapper {
        display: contents;
        /* هذا الغلاف لا ينشئ صندوقا.
           أبناؤه يصبحون عناصر flex لـ .flex-parent */
    }
    .item {
        padding: 16px;
        background-color: #3498db;
        color: white;
        border-radius: 8px;
    }
</style>

<div class="flex-parent">
    <div class="item">ابن مباشر 1</div>
    <div class="wrapper">
        <div class="item">ابن ملفوف 2</div>
        <div class="item">ابن ملفوف 3</div>
    </div>
    <div class="item">ابن مباشر 4</div>
</div>

<!-- جميع عناصر .item الأربعة تُنسق كعناصر flex،
     رغم أن اثنين منها متداخلان داخل .wrapper.
     عنصر .wrapper div لا ينشئ صندوقا. -->

هذا مفيد بشكل خاص عندما تحتاج لعنصر غلاف دلالي (لإمكانية الوصول أو JavaScript) لكن لا تريده أن يتداخل مع تخطيط flex أو grid للأب. حالة استخدام شائعة هي لف مجموعات من عناصر الشبكة في عنصر دلالي مثل <section> دون كسر تخطيط الشبكة.

display: flow-root -- إصلاح الطفو الحديث

قيمة display: flow-root تنشئ سياق تنسيق كتلي جديد (BFC) للعنصر. هذا هو الحل الحديث والنظيف لمشكلتين كلاسيكيتين في CSS: احتواء الأبناء العائمة (خدعة "clearfix" القديمة) ومنع انهيار الهوامش عبر الحدود.

<style>
    /* المشكلة: الأب ينهار عندما يكون الأبناء عائمين */
    .broken-container {
        background-color: #e3f2fd;
        border: 2px solid #1976d2;
        padding: 16px;
        /* بدون flow-root، هذه الحاوية تنهار لارتفاع 0 */
    }
    .broken-container img {
        float: left;
        margin-right: 16px;
    }

    /* الحل: flow-root ينشئ BFC جديد يحتوي الطفو */
    .fixed-container {
        display: flow-root; /* هذا هو clearfix الحديث */
        background-color: #e8f5e9;
        border: 2px solid #4caf50;
        padding: 16px;
    }
    .fixed-container img {
        float: left;
        margin-right: 16px;
    }
</style>

<!-- هذه الحاوية تنهار -- الخلفية والحدود تتقلص -->
<div class="broken-container">
    <img src="photo.jpg" alt="مثال" width="150" height="150">
    <p>هذا النص يلتف حول الصورة العائمة، لكن الحاوية الأم
    لا تلتف حول الطفو.</p>
</div>

<!-- هذه الحاوية تحتوي الطفو بشكل صحيح -->
<div class="fixed-container">
    <img src="photo.jpg" alt="مثال" width="150" height="150">
    <p>هذا النص يلتف حول الصورة العائمة، والحاوية الأم
    تتوسع بشكل صحيح لاحتواء كل شيء.</p>
</div>

قبل وجود display: flow-root، استخدم المطورون خدعا مختلفة لـ "clearfix" تتضمن عناصر زائفة ::after مع clear: both، أو overflow: hidden على الأب. قيمة display: flow-root أوضح دلاليا -- تقول صراحة "هذا العنصر ينشئ سياق تنسيق جديد" دون الآثار الجانبية للطرق الأخرى.

سياق التنسيق الكتلي (BFC)

سياق التنسيق الكتلي (BFC) هو منطقة من الصفحة يتم فيها تنسيق صناديق مستوى الكتلة. إنه أحد أهم المفاهيم في نموذج التنسيق المرئي. يعمل BFC كبيئة تخطيط مستقلة -- الطفو والهوامش وسلوكيات التخطيط الأخرى محتواة داخله ولا تتسرب لتؤثر على العناصر المحيطة.

يتم إنشاء BFC جديد بأي من الشروط التالية:

• العنصر الجذري للمستند (<html>)
• العناصر العائمة (float ليس none)
• العناصر ذات الموضع المطلق أو الثابت (position: absolute أو position: fixed)
• display: inline-block
• display: flow-root
• display: flex أو display: inline-flex (حاوية flex نفسها تنشئ BFC)
• display: grid أو display: inline-grid (حاوية grid تنشئ BFC)
• overflow معين لأي شيء غير visible أو clip (مثل auto أو scroll أو hidden)
• display: table-cell وdisplay: table-caption
• contain: layout أو contain: content أو contain: paint
• حاويات متعددة الأعمدة (column-count أو column-width ليس auto)

لماذا BFC مهم:

• احتواء الطفو: BFC يحتوي جميع الأحفاد العائمة، مما يمنع انهيار الأب.
• منع انهيار الهوامش: هوامش العناصر في BFCs مختلفة لا تنهار في بعضها البعض.
• استبعاد الطفو: عنصر BFC موضوع بجانب عنصر عائم لن يتداخل مع الطفو -- سيتقلص ليناسب المساحة المتبقية.

<style>
    .parent {
        background-color: #f5f5f5;
        padding: 1px; /* بدون هذا أو BFC، هوامش الأبناء تنهار عبر الأب */
    }

    /* بدون BFC -- الهوامش تنهار */
    .no-bfc .child {
        margin: 30px 0;
        padding: 20px;
        background-color: #e3f2fd;
    }

    /* مع BFC -- الهوامش محتواة */
    .with-bfc {
        display: flow-root; /* ينشئ BFC */
    }
    .with-bfc .child {
        margin: 30px 0;
        padding: 20px;
        background-color: #e8f5e9;
    }
</style>

<!-- بدون BFC: هوامش .child العلوية/السفلية تنهار عبر .parent -->
<div class="parent no-bfc">
    <div class="child">ابن بهامش 30px</div>
</div>

<!-- مع BFC: الهوامش محتواة داخل الأب -->
<div class="parent with-bfc">
    <div class="child">ابن بهامش 30px</div>
</div>

الصناديق المجهولة

الصناديق المجهولة هي صناديق ينشئها المتصفح تلقائيا عندما يوجد نص أو محتوى بجانب عناصر مستوى الكتلة دون أن يكون ملفوفا في عنصر خاص به. فهم الصناديق المجهولة يساعد في تفسير بعض سلوكيات التخطيط غير المتوقعة.

<div>
    هذا النص ينشئ صندوق كتلة مجهول.
    <p>هذا صندوق كتلة فقرة عادي.</p>
    هذا النص أيضا ينشئ صندوق كتلة مجهول.
</div>

<!-- المتصفح ينشئ داخليا شيئا مثل هذا:
    <div>
        [صندوق كتلة مجهول] هذا النص ينشئ صندوق كتلة مجهول. [/صندوق كتلة مجهول]
        <p>هذا صندوق كتلة فقرة عادي.</p>
        [صندوق كتلة مجهول] هذا النص أيضا ينشئ صندوق كتلة مجهول. [/صندوق كتلة مجهول]
    </div>
-->

<!-- وبالمثل لسياقات العناصر المضمنة: -->
<p>
    بعض النص <em>نص مؤكد</em> مزيد من النص.
</p>
<!-- "بعض النص " و" مزيد من النص." يُلفان في صناديق مضمنة مجهولة -->

يتم إنشاء صناديق الكتلة المجهولة عندما يختلط محتوى مستوى الكتلة ومستوى العناصر المضمنة كأشقاء داخل حاوية. يُلف المحتوى المضمن في صناديق كتلة مجهولة حتى يكون جميع أبناء الحاوية على نفس المستوى (جميعهم مستوى كتلة). لا يمكنك تنسيق الصناديق المجهولة مباشرة لأنها لا تملك محددا، لكنها ترث الأنماط من عنصرها الأب.

العناصر المستبدلة

العناصر المستبدلة هي عناصر لا يُمثل محتواها مباشرة بنموذج صندوق CSS للمستند. بدلا من ذلك، تعرض محتوى خارجيا يحدده مصدر العنصر أو نوعه. أكثر العناصر المستبدلة شيوعا هي <img> و<video> و<iframe> و<input> و<textarea> و<select> و<canvas>.

العناصر المستبدلة لها سلوك خاص:

• لها أبعاد جوهرية (عرض وارتفاع طبيعي مشتق من محتواها، مثل أبعاد البكسل للصورة).
• حتى عندما تكون مضمنة (مثل <img>)، يمكنها قبول خصائص width وheight -- على عكس العناصر المضمنة غير المستبدلة.
• لها قواعد عرض خاصة مستقلة عن نموذج صندوق CSS.
• تدعم خصائص object-fit وobject-position للتحكم في كيفية ملء محتواها للصندوق.

<style>
    /* الصور مضمنة افتراضيا لكنها تقبل width/height */
    .img-demo img {
        width: 200px;
        height: 150px;
        object-fit: cover; /* يحافظ على نسبة العرض إلى الارتفاع أثناء ملء الصندوق */
        border-radius: 8px;
    }

    /* مقارنة مع span -- عنصر مضمن غير مستبدل */
    .span-demo span {
        width: 200px;  /* ليس له تأثير */
        height: 150px; /* ليس له تأثير */
        background-color: #fff3e0;
        border: 1px solid #e65100;
    }

    /* عنصر فيديو مع object-fit */
    .video-box {
        width: 400px;
        height: 225px;
        object-fit: contain; /* يناسب داخل الصندوق، قد يظهر أشرطة */
        background-color: #000;
    }
</style>

<div class="img-demo">
    <img src="photo.jpg" alt="صورة منظر طبيعي مقصوصة لتغطي 200x150">
</div>

<div class="span-demo">
    <span>العرض والارتفاع يُتجاهلان عليّ.</span>
</div>

التدفق الطبيعي

التدفق الطبيعي هو وضع التخطيط الافتراضي للعناصر في المستند. عندما تكون العناصر في التدفق الطبيعي، تتراكم عناصر مستوى الكتلة عموديا من أعلى إلى أسفل، وتتدفق العناصر المضمنة أفقيا من اليسار إلى اليمين (في لغات LTR)، وتلتف إلى السطر التالي عندما تنفد المساحة الأفقية. تُزال العناصر من التدفق الطبيعي فقط عند تطبيق float أو position: absolute أو position: fixed أو position: sticky (جزئيا) عليها.

فهم التدفق الطبيعي مهم لأن جميع طرق التخطيط الأخرى (Flexbox وGrid والموضع المطلق) هي انحرافات عن التدفق الطبيعي. يجب أن تبدأ دائما بالتدفق الطبيعي ولا تخرج منه إلا عندما يكون لديك حاجة تخطيط محددة لا يستطيع التدفق الطبيعي معالجتها. HTML المنظم جيدا في التدفق الطبيعي هو الأساس الأكثر سهولة للوصول وقابلية للتنبؤ لتخطيطاتك.

سياقات التنسيق

سياق التنسيق هو البيئة التي تحدد كيفية تنسيق العناصر الفرعية. هناك عدة أنواع من سياقات التنسيق في CSS:

• سياق التنسيق الكتلي (BFC): يتم تنسيق صناديق مستوى الكتلة عموديا. غطينا هذا بالتفصيل أعلاه.
• سياق التنسيق المضمن (IFC): يتم تنسيق صناديق مستوى العناصر المضمنة أفقيا في صناديق الأسطر. النص والعناصر المضمنة تشارك في IFC.
• سياق تنسيق Flex: ينشأ بواسطة display: flex أو display: inline-flex. يصبح الأبناء عناصر flex ويُنسقون وفقا لخوارزمية تخطيط flex.
• سياق تنسيق Grid: ينشأ بواسطة display: grid أو display: inline-grid. يصبح الأبناء عناصر grid ويُوضعون داخل شبكة محددة.
• سياق تنسيق الجدول: ينشأ بواسطة display: table والقيم المرتبطة. يُنسق الأبناء باستخدام خوارزمية تخطيط الجدول.

يتحدد سياق التنسيق الذي يشارك فيه الابن بقيمة عرض الأب. عند تعيين display: flex على حاوية، يتم وضع جميع أبنائها في سياق تنسيق flex، بغض النظر عما إذا كان هؤلاء الأبناء <div> أو <span> أو أي عنصر آخر.

display: list-item

قيمة display: list-item تجعل العنصر يتصرف كعنصر قائمة -- ينشئ صندوق كتلة للمحتوى وصندوق علامة إضافي للنقطة أو الرقم. هذه هي قيمة العرض الافتراضية لعناصر <li>. يمكنك استخدامها على عناصر أخرى لمنحها سلوك شبيه بالقائمة، بما في ذلك القدرة على إظهار النقاط أو الأرقام باستخدام list-style-type.

<style>
    .custom-list div {
        display: list-item;
        list-style-type: disc;
        margin-left: 20px;
        padding: 4px 0;
    }

    .numbered-items p {
        display: list-item;
        list-style-type: decimal;
        margin-left: 24px;
        padding: 4px 0;
    }

    .custom-marker div {
        display: list-item;
        list-style-type: "← ";
        margin-left: 16px;
        padding: 4px 0;
    }
</style>

<!-- عناصر div عادية تُعرض كعناصر قائمة -->
<div class="custom-list">
    <div>العنصر الأول باستخدام div</div>
    <div>العنصر الثاني باستخدام div</div>
    <div>العنصر الثالث باستخدام div</div>
</div>

<!-- فقرات تُعرض كعناصر قائمة مرقمة -->
<div class="numbered-items">
    <p>الخطوة الأولى: افتح المحرر.</p>
    <p>الخطوة الثانية: اكتب الكود.</p>
    <p>الخطوة الثالثة: اختبر النتيجة.</p>
</div>

<!-- علامات نص مخصصة -->
<div class="custom-marker">
    <div>انتقل إلى الإعدادات</div>
    <div>انقر على المظهر</div>
    <div>اختر سمتك</div>
</div>

display: table والقيم المرتبطة

قبل Flexbox وGrid، كانت عائلة قيم display: table واحدة من الطرق القليلة لتحقيق تخطيطات معينة في CSS. هذه القيم تجعل العناصر غير الجدولية تتصرف كما لو كانت عناصر جدول HTML. بينما حلت تقنيات التخطيط الحديثة محل هذا النهج إلى حد كبير، فإن فهم قيم عرض الجدول لا يزال ذا قيمة لأنها تحل مشاكل معينة بأناقة مثل التوسيط العمودي والأعمدة المتساوية الارتفاع.

عائلة عرض الجدول تشمل:

• display: table -- يتصرف مثل <table>
• display: table-row -- يتصرف مثل <tr>
• display: table-cell -- يتصرف مثل <td>
• display: table-header-group -- يتصرف مثل <thead>
• display: table-footer-group -- يتصرف مثل <tfoot>
• display: table-row-group -- يتصرف مثل <tbody>
• display: table-caption -- يتصرف مثل <caption>
• display: table-column -- يتصرف مثل <col>
• display: table-column-group -- يتصرف مثل <colgroup>

<style>
    .table-layout {
        display: table;
        width: 100%;
        border-spacing: 16px;
    }
    .table-row {
        display: table-row;
    }
    .table-cell {
        display: table-cell;
        padding: 24px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        vertical-align: top;
    }
    /* جميع الخلايا في نفس الصف تحصل تلقائيا على ارتفاع متساوٍ */
</style>

<div class="table-layout">
    <div class="table-row">
        <div class="table-cell">
            <h3>العمود 1</h3>
            <p>محتوى قصير.</p>
        </div>
        <div class="table-cell">
            <h3>العمود 2</h3>
            <p>هذا العمود يحتوي على محتوى أكثر بكثير، مما يوضح أن
            جميع الأعمدة في نفس الصف ستمتد لتطابق ارتفاع العمود
            الأطول. هذا هو السلوك الطبيعي لخلايا الجدول وأحد المزايا
            الرئيسية لعرض الجدول.</p>
        </div>
        <div class="table-cell">
            <h3>العمود 3</h3>
            <p>محتوى متوسط هنا.</p>
        </div>
    </div>
</div>

مثال عملي: التوسيط العمودي بخلية الجدول

أحد الاستخدامات الكلاسيكية لـ display: table-cell هو التوسيط العمودي. قبل أن جعل Flexbox align-items: center سهلا، كان نهج خلية الجدول أحد أكثر الطرق موثوقية لتوسيط محتوى بارتفاع غير معروف عموديا.

<style>
    /* الطريقة 1: التوسيط العمودي بخلية الجدول */
    .center-table {
        display: table;
        width: 100%;
        height: 300px;
    }
    .center-table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background-color: #e3f2fd;
    }

    /* الطريقة 2: التوسيط بـ Flexbox (النهج الحديث) */
    .center-flex {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 300px;
        background-color: #e8f5e9;
    }

    /* الطريقة 3: التوسيط بـ Grid (الأكثر إيجازا) */
    .center-grid {
        display: grid;
        place-items: center;
        height: 300px;
        background-color: #fff3e0;
    }

    /* الطريقة 4: الموضع المطلق + التحويل */
    .center-absolute {
        position: relative;
        height: 300px;
        background-color: #fce4ec;
    }
    .center-absolute .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<!-- نهج خلية الجدول -->
<div class="center-table">
    <div class="center-table-cell">
        <p>متوسط عموديا وأفقيا بخلية الجدول.</p>
    </div>
</div>

<!-- نهج Flexbox -->
<div class="center-flex">
    <p>متوسط بـ Flexbox.</p>
</div>

<!-- نهج Grid -->
<div class="center-grid">
    <p>متوسط بـ Grid.</p>
</div>

<!-- نهج الموضع المطلق -->
<div class="center-absolute">
    <div class="content">
        <p>متوسط بالموضع المطلق والتحويل.</p>
    </div>
</div>

مثال عملي: تقنيات التوسيط الأفقي لعناصر الكتلة

توسيط عناصر مستوى الكتلة أفقيا هو مهمة CSS أساسية. إليك النهج الرئيسية ومتى تستخدم كل واحد:

<style>
    /* الطريقة 1: هوامش تلقائية -- لعناصر كتلة مفردة */
    .center-margin {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background-color: #e3f2fd;
        border: 1px solid #1976d2;
    }

    /* الطريقة 2: text-align -- لأبناء inline وinline-block */
    .center-text-align {
        text-align: center;
    }
    .center-text-align .box {
        display: inline-block;
        padding: 20px 40px;
        background-color: #e8f5e9;
        border: 1px solid #4caf50;
    }

    /* الطريقة 3: Flexbox -- لأي أبناء */
    .center-flexbox {
        display: flex;
        justify-content: center;
    }
    .center-flexbox .box {
        padding: 20px 40px;
        background-color: #fff3e0;
        border: 1px solid #e65100;
    }

    /* الطريقة 4: Grid -- لأي أبناء */
    .center-grid-h {
        display: grid;
        justify-items: center;
    }
    .center-grid-h .box {
        padding: 20px 40px;
        background-color: #fce4ec;
        border: 1px solid #c62828;
    }
</style>

<!-- هوامش تلقائية -->
<div class="center-margin">متوسط بـ margin: auto</div>

<!-- text-align: center -->
<div class="center-text-align">
    <div class="box">متوسط بـ text-align</div>
</div>

<!-- Flexbox -->
<div class="center-flexbox">
    <div class="box">متوسط بـ Flexbox</div>
</div>

<!-- Grid -->
<div class="center-grid-h">
    <div class="box">متوسط بـ Grid</div>
</div>

ملخص: مرجع سريع لخاصية العرض

إليك ملخص لجميع قيم العرض المغطاة في هذا الدرس ومتى تستخدم كل واحدة:

• display: block -- العنصر يأخذ العرض الكامل ويبدأ على سطر جديد. استخدمه للحاويات الهيكلية والأقسام.
• display: inline -- العنصر يتدفق مع النص بدون تحكم في العرض/الارتفاع. استخدمه للدلالات على مستوى النص.
• display: inline-block -- يتدفق بشكل مضمن لكنه يقبل الأبعاد. استخدمه للتخطيطات الأفقية من صناديق محددة الحجم.
• display: none -- يزيل العنصر تماما من التخطيط وشجرة إمكانية الوصول. استخدمه لإخفاء المحتوى شرطيا.
• display: contents -- الصندوق يختفي ويُرقى الأبناء. استخدمه لفك لف العناصر الدلالية في تخطيطات flex/grid.
• display: flow-root -- ينشئ BFC جديد. استخدمه لاحتواء الطفو ومنع انهيار الهوامش.
• display: list-item -- ينشئ صندوق علامة. استخدمه لعناصر شبيهة بالقائمة المخصصة.
• display: table وtable-cell وtable-row -- سلوك تخطيط الجدول. استخدمه للأعمدة المتساوية الارتفاع والتوسيط العمودي في الكود القديم.
• display: flex -- تخطيط flex أحادي البعد. يُغطى في درس مخصص.
• display: grid -- تخطيط شبكة ثنائي البعد. يُغطى في درس مخصص.