هل من الخطأ تغيير عنصر كتلة إلى مضمنة مع CSS إذا كان يحتوي على عنصر كتلة آخر؟
https://stackoverflow.com/questions/746531
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أعلم أنه من الخطأ وضع عنصر كتلة داخل عنصر مضمون، ولكن ماذا عن ما يلي؟
تخيل هذه العلامات الصالحة:
<div><p>This is a paragraph</p></div>
الآن أضف هذا CSS:
div {
display:inline;
}
يؤدي هذا إلى إنشاء موقف حيث يحتوي عنصر مضمن على عنصر كتلة (يصبح DIV مضمون و P هو كتلة افتراضية)
هل لا تزال عناصر الصفحة صالحة؟
كيف ومتى نحكم إذا كان HTML صالح - قبل أو بعد تطبيق قواعد CSS؟
تحديث: لقد علمت ذلك منذ ذلك الحين في HTML5، فهي صالحة تماما لوضع عناصر مستوى الكتلة داخل علامات الرابط على سبيل المثال:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
هذا هو في الواقع مفيد حقا إذا كنت تريد كتلة كبيرة من HTML ليكون رابطا.
المحلول
عند وجود مربع مضمن يحتوي على مربع من مستوى كتلة التدفق، يتم تقسيم المربع المضمن (وأسلادها المضمنة داخل نفس مربع السطر) حول المربع على مستوى الكتلة (وأي أشقاء على مستوى كتلة متتاليين أو مفصلا فقط من عناصر Whitespace القابلة للطي و / أو عناصر خارج التدفق)، تقسيم المربع المضمن إلى صندوقين (حتى إذا كان أي من الجانبين فارغا)، واحد على كل جانب من مربع من مربع المستوى (ES). صناديق الخط قبل الاستراحة وبعد إرفاق الكسر في صناديق كتلة مجهولة، وتصبح مربع من مستوى الكتلة شقيقا من تلك المربعات المجهولة. عندما يتأثر مثل هذا الصندوق المضمن في تحديد المواقع النسبية، تؤثر أي ترجمة ناتجة أيضا على المربع على مستوى الكتلة الموجودة في المربع المضمن.
ستقدم هذا النموذج في المثال التالي إذا كانت القواعد التالية:
p { display: inline } span { display: block }تم استخدامها مع وثيقة HTML هذه:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>يحتوي عنصر P جزء من النص المجهول (C1) من النص المجهول الذي يتبعه عنصر مستوى كتلة تليه قطعة أخرى (C2) من النص المجهول. ستكون المربعات الناتجة صندوقا كتلة يمثل الجسم، الذي يحتوي على مربع كتلة مجهول حول مربع C1، ومربع كتلة SPAN، ومربع كتلة مجهول آخر حول C2.
يتم تورث خصائص المربعات المجهولة من المربع غير الهوية المحيط (على سبيل المثال، في المثال أسفل عنوان الفرع القسم الفرعي "مربعات كتلة مجهولة"، واحد للحف). الخصائص غير الموروثة لها قيمتها الأولية. على سبيل المثال، يتم تورث خط المربع المجهول من DIV، لكن الهوامش ستكون 0.
لا تزال الخصائص التي تم تعيينها على عناصر تستند إلى إنشاء صناديق كتلة مجهولة أن تنطبق على صناديق ومضمون هذا العنصر. على سبيل المثال، إذا تم تعيين حدود على عنصر P في المثال أعلاه، فسيتم رسم الحدود حول C1 (مفتوح في نهاية السطر) و C2 (مفتوح في بداية الخط).
قام بعض وكلاء المستخدمين بتنفيذ حدود على متن الطائرة تحتوي على كتل بطرق أخرى، على سبيل المثال، عن طريق التفاف مثل هذه الكتل المتداخلة داخل "صناديق خط مجهولة" وبالتالي رسم حدود مضمنة حول هذه الصناديق. كما لم يحدد CSS1 و CSS2 هذا السلوك، قد يقوم وكلاء المستخدمون CSS1 فقط و CSS2 فقط بتنفيذ هذا النموذج البديل وما زال المطالبة بهذا الجزء من CSS 2.1. هذا لا ينطبق على UAS المتقدمة بعد إصدار هذه المواصفات.
جعل هذا ما سوف. من الواضح أن السلوك محدد في CSS، على الرغم من أنه ما إذا كان يغطي جميع الحالات، أو يتم تطبيقه باستمرار عبر متصفحات اليوم غير واضح.
نصائح أخرى
بغض النظر عما إذا كان صالحا أم لا، فإن هيكل العنصر مخطئ. السبب في عدم وضع عناصر كتلة داخل العناصر المضمنة هو بحيث يمكن للمتصفح أن يجعل العناصر بطريقة يمكن التنبؤ بها بسهولة.
حتى إذا لم يكسر أي قواعد لأي من HTML أو CSS، فلا يزال بإنشاء عناصر لا يمكن تقديمها على النحو المقصود. يتعين على المتصفح التعامل مع العناصر تماما كما لو كان رمز HTML غير صالح.
ستظل HTML و CSS سارية. من الناحية المثالية، لن تضطر إلى القيام بشيء من هذا القبيل، لكن هذا قليلا من CSS هو في الواقع وسيلة مفيدة (وصالح ساري المفعول بشكل مفيد) للحصول على علة الهامش المزدوج ل Internet Explorer دون اللجوء إلى الأرقام المشروطة أو الخارقة التي ستبذل CSS الخاص بك. يحتوي HTML (x) على قيمة أكثر دلالية من CSS، لذلك فمن الأفضل أهمية أن تكون CSS صالحة دلالة. في رأيي، من المقبول لأنه يحل مشكلة متصفح مزعجة دون إبطال الكود الخاص بك.
يتم التحقق من صحة HTML بشكل مستقل عن CSS، لذلك ستظل الصفحة صالحة. أنا متأكد من أن المواصفات CSS لا يقول شيئا عن ذلك أيضا، لكن لا اقتبسني على ذلك. ومع ذلك، سأكون حريصا للغاية باستخدام تقنية مثل هذا، حيث قد يتم تقديمها كما هو مخصص في بعض المتصفحات، كنت بحاجة إلى اختبار "EM"، لا أرى العديد من الضمانات التي يتم إجراؤها.
هل لا تزال عناصر الصفحة صالحة؟
"صالح" في إحساس HTML، نعم؛ أتش تي أم أل لا يعرف شيئا عن CSS.
ومع ذلك، فإن التقديم الذي تحصل عليه في المتصفح "غير محدد" من مواصفات CSS، لذلك يمكن أن يبدو مثل أي شيء على الإطلاق. في حين أنتم يمكنك تضمين مثل هذه القاعدة في CSS Hacks التي تهدف إلى متصفح معين (حيث تعرف كيف يجعل هذا المتصفح هذه الحالة)، لا ينبغي تقديمه إلى المتصفحات بشكل عام.
لا أعرف من أعلى رأسي إذا كان هذا يتحقق من أي قواعد لكنني أوصي باستخدام W3C HTML Validator. و ال W3C CSS Validator. لتحديد ذلك. آمل أن يكون هذا مفيدا!
لا، ليس خيارا خاطئا. يمكننا استخدام حسب المتطلبات.
إذا كان هناك منطق تتبعه وينتهي بك الأمر في تنفيذ ذلك، فهذا غير صحيح. الأمور الفعلية ليست "خطأ" فقط لأنها غريبة. نعم، إنه أمر غير عادي للغاية ولكنه يساعد وليس خطأ. انها متعمدة. يجب أن يخدمك HTML و CSS، وليس العكس، لذلك لا تستمع إلى التعليقات التي تخبرك بعدم القيام بذلك فقط لأنها قبيحة.
من النموذجي استدعاء الحل "غير صالح" واقترح طريق طويل حول الكتلة. في بعض الأحيان يمكنك إعادة التفكير في ما فعلته. ولكن يمكن أن يكون هناك أسباب كثيرة لما فعلته ولا يعتبرونهم.
أنا استخدم كتل داخل الطيران بانتظام. إنها صالحة وأنها تعمل - إنها ليست ضرورية في معظم الحالات. وماذا في ذلك. تذكر عندما أخبرنا XHTML أن نضع اقتباسات حول الخصائص (وصرخ الجميع إليك إذا لم تقم بذلك!)، تتيح HTML5 الآن حذفها إذا لم يكن هناك مساحة داخل. ماذا حدث لهذا الشرط الأخير بعد العلامات المفرد؟ "u003Cbr /> "؟ هيا. تغيير المعايير. لكن المتصفحات استمروا في دعم الأشياء غير القياسية أيضا. تم إهمال الوسط؛ نحن في عام 2013 وما زالوا يعمل. جدول التركيز الرأسي؟ في بعض الأحيان هي الطريقة الوحيدة. DIV داخل A لجعله تحوم كما كنت خططت؟ فقط المضي قدما.
التركيز على أشياء مهمة.
أعتقد، (x) HTML صالحة، CSS صالحة. هل النتيجة صالحة؟ نعم، إذا كان يبحث في المتصفح كما تريد.
