and - outline css




عرض: كتلة داخل العرض: مضمنة (3)

أريد أن أفهم ما يحدث عندما يكون عنصر display:block CSS الخاص به display:block هو طفل DOM لعنصر يتم display:inline CSS فيه display:inline (بحيث يكون عنصر الحظر عبارة عن طفل لعنصر مضمّن).

يتم وصف هذه السيناريوهات في المقطع مربعات كتلة "مجهول" لمواصفات CSS 2.1: يتضمن المثال القواعد التالية ...

body { display: inline }
p    { display: block }

... ويقول النص المصاحب ...

يحتوي عنصر BODY على مقطع (C1) للنص المجهول متبوعًا بعنصر مستوى الكتلة متبوعًا بجزء آخر (C2) من نص مجهول. ستكون المربعات الناتجة عبارة عن مربع كتلة مجهول حول BODY ، تحتوي على مربع كتلة مجهول حول C1 ، ومربع كتلة P ، ومربع كتلة آخر مجهول حول C2.

إذا كان لديك display:inline عنصر رئيسي display:inline ، وإذا كان هذا الوالد لديه طفل display:block ، فيبدو أن وجود هذا الطفل يجعل الوالدين يتصرفان تقريبًا مثل display:block ، وتجاهل حقيقة أنه يتم تعريفه على أنه display:inline (حيث أن الوالد الآن لا يحتوي إلا على الأطفال المحظورين والمجهولين ، بمعنى أنه لم يعد يحتوي على أي أطفال مضمنين)؟

سؤالي هو ، في هذا السيناريو (حيث يوجد display:block الطفل) ثم ما هي الاختلافات بين display:inline تعريف الوالدين display:inline بدلا من display:block ؟

تحرير: أنا مهتم أكثر بفهم معيار CSS 2.1 من كيفية تنفيذ ما إذا كانت تطبيقات المستعرض المختلفة تتصرف في الممارسة أم لا.

التعديل الثاني:

هناك اختلاف واحد لوحظ في المواصفات. في المستند التالي ، يحيط الحدود لفقرة 'block' الثانية بالفقرة بأكملها وعرض الصفحة بالكامل ؛ بينما يكون الحد للفقرة المضمنة الأولى حول كل سطر (حتى عند وجود عدة أسطر) داخل الفقرة وليس أكثر من العرض الدقيق لكل سطر (مع جعل كل سطر أقصر من عرض الصفحة).

<html>
<head>
<style type="text/css">
p.one 
{
border-style:solid;
border-width:1px;
display: inline;
}
p.two 
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text. <b>Note:</b> The "border-width"
property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text.</p>
</body>
</html>

إذا قمت بإضافة قاعدة النمط التالي ...

b
{
display: block;
}

... ثم يصبح "ملاحظة:" في الفقرة المضمنة الأولى كتلة ، والتي تقسم الفقرة (وفقا للمواصفات ، الجزء الأول والأخير من الفقرة الآن في كتلة مجهولة). ومع ذلك ، فإن الحدود حول الجزء الأول والأخير من الفقرة لا تزال هي حدود نمط "مضمنة": وهكذا ، لا تزال هي نفسها كما لو تم إعلان p.one display:block في المقام الأول.

هناك اقتباس من المواصفات ، والتي تقول ،

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

هل خاصية "نمط الحدود" هي نوع الخاصية الوحيد الذي يظهر فيه الفرق؟


أعتقد أنني فهمت الفرق ، أخيرا ، وهناك فرق أساسي.

عندما يتم تعريف عنصر المستوى الأعلى (على سبيل المثال <BODY> ) بالعرض: block ، فإن:

  • هناك كتلة مرتبطة بالعنصر

  • يحتوي هذا الحظر على (أي أنه يعمل ككتلة تحتوي على) كتل مجهولة (مثل العقد النصية) والعنصر الفرعي غير المجهول (مثل كتل <P> )

  • ترتبط سمات نمط العنصر ذي المستوى الأعلى ، مثل الحشو ، بهذه الكتلة المحتوية

عندما يتم تعريف عنصر المستوى الأعلى (مثل <BODY> ) مع العرض: مضمنة ، فإن:

  • لا يوجد قالب واحد مرتبط بالعنصر

  • لا تحتوي محتويات العنصر (العقد النصية في كتلة مجهولة ، والعناصر التابعة في كتلة غير مجهولة) على كتلة محتوية مقترنة بعنصر المستوى الأعلى

  • ترتبط سمات نمط العنصر ذي المستوى الأعلى ، مثل الحشو ، بمحتواه المضمَّن


عندما قرأت المواصفات ، أجد سؤالك في الواقع أجاب بشكل جيد :

عندما يحتوي مربع مضمّن على مربع كتلة ، يكون المربع المضمن [...] [هو] مقطوعًا حول الكتلة. يتم تضمين مربعات السطر [في] قبل الفاصل وبعد الفاصل في مربعات مجهولة ، ويصبح مربع الكتلة شقيقًا لتلك المربعات المجهولة.

<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

ستكون المربعات الناتجة عبارة عن مربع كتلة مجهول حول BODY ، تحتوي على مربع كتلة مجهول حول C1 ، ومربع كتلة P ، ومربع كتلة آخر مجهول حول C2.

أو ، بصريًا:

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

الآن لسؤالك: هل يختلف هذا عن <BODY style="display: block; "> ؟

نعم إنه كذلك. في حين أنه لا يزال 4 مربعات ( مربع كتلة مجهولة حول الجسم الآن مربع كتلة BODY ) ، فإن المواصفات تحكي الفرق :

لا تزال الخصائص التي تم تعيينها على العناصر التي تتسبب في إنشاء مربعات كتلة مجهول تنطبق على مربعات [إنشاء كتلة غير معروفة] ومحتوى ذلك العنصر. على سبيل المثال ، إذا تم تعيين حد على عنصر BODY في المثال أعلاه ، سيتم رسم الحد حول C1 (مفتوح في نهاية السطر) و C2 (مفتوح عند بداية السطر):

+--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

هذا مختلف عن <BODY style="display: block; "> :

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

هذا يعتمد في بعض الأحيان على css المحدد أو المتصفح.

الأكثر شيوعًا ، لقد رأيت سلوكين:

  • display:block عنصر داخل العنصر display:block عنصر داخلي يجعل display:inline يعمل في شكل مثل display:block width:100% .

  • display:inline عنصر display:inline يحتوي على display:block فقط display:block float:left أو float:right لا تأخذ العناصر float:right أي مساحة ، كما لو لم تكن هناك عناصر بداخله. display:block تعمل عناصر display:block كما لو كانت داخل display:block آخر display:block عنصر display:block ، وفي بعض الأحيان يكون هناك إجراءات غير تقليدية تعتمد على position .

كل من position float يجعلان عناصر الطفل لها أحيانًا سلوكًا غريبًا ، ولكن تجنبها يجعلها تعمل بشكل عام كما لو كانت inline .







inline