تعد سمة العرض إحدى أهم السمات في CSS، ويتم استخدامها بشكل أساسي للتحكم في تخطيط العناصر. من خلال سمة العرض، يمكنك تحديد ما إذا كان سيتم عرض العنصر أم لا.
1. دور سمة العرض
1. يمكن لسمة العرض تعيين نوع العرض الداخلي والخارجي للعنصر.
(1) نوع العرض الخارجي:
أ. تتضمن أنواع عناصر العرض الخارجية الكتلة، والمضمنة، وما إلى ذلك.
ب. سيحدد نوع العرض الخارجي أداء العنصر في التخطيط المرن.
(2) نوع العرض الداخلي:
تتضمن أنواع العرض الداخلي التخطيط المرن، وتخطيط الشبكة، والتخطيط المرن، وما إلى ذلك.
يتحكم نوع العرض الداخلي للعنصر في كيفية تخطيط العناصر التابعة له.
2. تخطيط السوائل (تدفق المستند أو التدفق المنتظم):
"تدفق المستند" أو "التخطيط المرن" هو الطريقة التي يتم بها عرض العناصر "الكتلة" و"المضمنة" على الصفحة قبل إجراء أي تغييرات على التخطيط (افتراضيًا).
وبعبارة بسيطة ومباشرة، فهي طريقة تنضيد تنص على كيفية كتابة العناصر على مستوى الكتلة والعناصر المضمّنة وعرضها على الصفحة.
(1) في تخطيط التدفق - طريقة تخطيط العناصر على مستوى الكتلة:
يتم ترتيب المربعات على مستوى الكتلة عموديًا بالترتيب، بدءًا من أعلى الكتلة التي تحتوي عليها.
سيتم تحديد المسافة العمودية بين المربعات ذات المستوى نفسه بواسطة سمة "الهامش".
سيتم طي التباعد الرأسي بين صندوقين متجاورين على مستوى الكتلة وفقًا لمبدأ طي الهامش.
(2) في التخطيط المرن - طريقة تخطيط العناصر المضمنة:
سيتم ترتيب الصناديق أفقيًا بالترتيب بدءًا من أعلى الكتلة التي تحتوي عليها.
يتم الحفاظ على الهوامش والحدود والحشوات الأفقية فقط.
يمكن محاذاة المربعات عموديًا بطرق مختلفة: محاذاة للأسفل أو للأعلى، أو محاذاة النص للأسفل
2. عنصر نوع العرض الخارجي
1. يحدد spplay نوع عرض العنصر من خلال قيم السمات التالية
(1) مستوى كتلة الكتلة
(2) كتلة مضمنة كتلة مضمنة
(3) مضمنة
2. تنقسم أنواع عرض العناصر إلى: مستوى الكتلة والمضمّن، وما إلى ذلك.
3. تنقسم العناصر المضمنة (المضمنة) إلى: عناصر مضمنة مضمنة وعناصر كتلة مضمنة مضمنة
(1) diblock عناصر مستوى الكتلة
1. العناصر الشائعة على مستوى الكتلة هي:
<p>، <div>، <ul>، <ol>، <li>، <h1>~<h6>، <dl>، إلخ.
2. خصائص عناصر مستوى الكتلة:
(1) الخط الحصري
(2) يمكنك ضبط سمات العرض والارتفاع.
(3) إذا لم يتم تعيين العرض، فسيتم ضبط العرض بشكل افتراضي على عرض منطقة محتوى العنصر الأصلي.
(4) يمكن وضع أي نوع من العناصر في عناصر مستوى الكتلة، ولكن لا يمكن وضع عناصر الكتلة الأخرى في علامات عناصر النص.
(5) لا يمكن وضع علامتي p وdiv في العلامة p.
(6) لا يمكن وضع علامات p وdiv في علامات h1-h6.
(2) عناصر الكتلة المضمنة
1. العناصر التالية لها خصائص عناصر الكتلة المضمنة:
<img>، وعناصر النموذج، و<video>، و<audio>، وما إلى ذلك. وتسمى هذه العناصر أساسًا بالعناصر القابلة للاستبدال (المصنفة كعناصر مضمنة)
2. خصائص عناصر الكتلة المضمنة:
(1) سيتم عرض عناصر الكتلة المضمنة (أو المضمنة) المتجاورة على سطر واحد، إذا لم يكن من الممكن وضعها، فسيتم التفافها في سطر آخر.
(2) ستكون هناك فجوات فارغة بين عناصر الكتلة المضمنة المتجاورة.
(3) يمكن تعيين سمات العرض والارتفاع. العرض الافتراضي للعنصر هو عرض محتواه.
(3) عناصر مضمنة (مضمنة).
1. تتضمن العناصر المضمنة الشائعة ما يلي:
<a>، <strong>، <span>، <i>، <del>، وما إلى ذلك.
2. خصائص العناصر المضمنة:
سيتم عرض العناصر المضمنة المتجاورة على سطر واحد إذا لم يكن من الممكن احتواؤها، فسيتم عرضها في سطر جديد.
تعيين خصائص العرض والارتفاع غير صالح. ويتسع عرضه وارتفاعه حسب حجم محتواه.
يمكن وضع النص أو العناصر المضمنة الأخرى فقط داخل العناصر المضمنة.
3. ملاحظة:
لا يمكن وضع العلامة <a> داخل العلامة <a>، ولكن يمكن وضع عناصر مستوى الكتلة داخل العلامة <a>.
في التطوير الفعلي، سيتم تحويل العلامة <a> إلى عنصر على مستوى الكتلة في بعض الحالات.
مقارنة بين ثلاثة أنواع من العناصر
3. التحويل بين العناصر المضمنة وعناصر مستوى الكتلة
نحتاج فقط إلى إضافة قيمة سمة العرض المقابلة إلى العنصر المقابل لتحويل العنصر إلى نوع العنصر المقابل.
(1) استخدم العرض: كتلة لتحويل العناصر إلى عناصر على مستوى الكتلة.
مثال:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: none;}</style></head><body><ahref=>رابط برمجة dotcpp</a></body></html>نتائج التشغيل:
(2) استخدم العرض: مضمن لتحويل العناصر إلى عناصر مضمنة. ومع ذلك، هناك عدد قليل من التطبيقات لتحويل العناصر إلى عناصر مضمنة.
(3) استخدم العرض: inline-block لتحويل العناصر إلى عناصر كتلة مضمّنة
4. طريقة العنصر المخفي
تجديد:
(1) قيم العرض بخلاف لا شيء هي عناصر عرض.
(2) الرؤية: مرئية؛ وهي عنصر العرض
مثال:
يمكن استخدام قيمة السمة لا يوجد عرض لإخفاء العناصر، ولها وظيفة مشابهة للرؤية: مخفي؛ والفرق هو أن العرض: لا شيء؛ أثناء إخفاء العنصر، فإنه سيخفي أيضًا الموضع الذي يشغله العنصر. يتم استخدام العرض: لا شيء عادةً مع JavaScript لإخفاء عنصر أو إظهاره.
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>إخفاء</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>نتائج التشغيل:
5. الفرق بين طريقتي الإخفاء
6. قم بإزالة المسافة البيضاء الافتراضية لعناصر الكتلة المضمنة
يتم إنشاء الفجوات بشكل افتراضي بين عناصر الكتلة المضمنة.
أسباب الفجوات:
(1) عندما يتم تنسيق العناصر كعناصر مضمنة، سيتم معالجة أحرف المسافات البيضاء (المسافات، وأول السطر، وخلاصات الأسطر، وما إلى ذلك) بين العناصر بواسطة المتصفح.
(2) وفقًا لطريقة معالجة المسافة البيضاء (الإعداد الافتراضي هو دمج المسافات البيضاء الزائدة)، يتم تحويل إرجاع السطر وتغذية السطر في كود HTML الأصلي إلى حرف مسافة بيضاء، لذلك تظهر فجوات بين العناصر.
(3) سوف يتغير التباعد بين هذه العناصر مع حجم الخط
حل:
(1) أضف العنصر الأصلي وأعد كتابة حجم الخط للعنصر الفرعي في نفس الوقت
سمة حجم الخط لها وراثة، لذلك سيتم توريث العنصر الأصلي Font-size:0 إلى نطاق العنصر الفرعي، ويحتاج العنصر الفرعي إلى إعادة تعيين حجم الخط.
(2) إضافة تعويم إلى العنصر
بعد إضافة عنصر عائم، سوف ينفصل عن تدفق المستند. عندما لا تتم إضافة ارتفاع العنصر الأصلي، ستكون هناك مشكلة انهيار الارتفاع، ويجب حل المشكلة الناجمة عن العائم.
(3) أضف عرضًا: كتلة في الفجوة بين الصور؛
بعد إضافة العرض: كتلة، تصبح الصورة عنصرًا على مستوى الكتلة وتحتل سطرًا حصريًا.