عنصر <html> ، وهو عنصر الجذر في مستند XHTML ، مألوف جدًا. ومع ذلك ، كنت أحاول إجراء تخطيط مؤخرًا ووجدت أنه في IE ، ليس دورًا بسيطًا ، مع بعض "الطبيعة" غير العادية. دعنا نلخصها للرجوع إليها:
الوضع القياسي IE6:◎ بغض النظر عن الارتفاع والعرض الذي يتم تعيينه له ، فإن حجمه يغطي دائمًا منطقة المشاهدة بأكملها.
◎ بغض النظر عن نوع الحشوة والحدود التي يتم تعيينها له ، فإن الحجم والحجم يملأان دائمًا منطقة المشاهدة بأكملها.
◎ سيتم تجاهل الهامش.
◎ كتلة تحتوي الأولي على عرض الحدود لمستطيل منطقة العرض ناقص <html>
باستخدام CSS3 للتعبير عنها ، يمكننا أن نعتبر <html> في IE6 عنصرًا غير عادي من الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ حجم الصناديق: صندوق الحدود ؛ وهذه السمات غير قابلة للتغيير.
الوضع القياسي IE7:على الرغم من أن IE7 قد أصلحت العديد من الأخطاء CSS في IE6 ، إلا أن فهم <html> أكثر تعقيدًا بكثير من IE6. على الرغم من أن IE6 غريب ، إلا أن هناك بعض السمات التي يمكن تغييرها ، لذلك لا تزال بسيطة. يمكن أن يقبل IE7's <html> المزيد من السمات ، لكن الخوارزمية لا تتبع المواصفات وهي صادقة ، لذلك من المثير للقلق أن تكتشفها من IE6.
الأول هو ميزة التوسع التلقائي.
العنصر <html> بسيط في اتجاه y ، ويشبه فهم IE6 لارتفاع العناصر العادية - إذا كان ارتفاع المحتوى يتجاوز ارتفاع <html> ، أو إذا كان <html> لا يحتوي على ارتفاع ثابت (أي القيمة الافتراضية التلقائية) ، فإن <html> سوف يوسع طوله لتشمل المحتوى.
ولكن في اتجاه X ، تركز المشكلة بشكل أساسي على فهم عرض <Body>. فيما يلي حالتان: (ألم يقل <html>؟ لماذا تحدثت عن عرض <Body>؟ لأنه إذا أراد <html> التوسع تلقائيًا ، فيجب أن تعرف مدى عرض <Body>.
الحالة الأولى: عرض <html> إذا كانت أي قيمة أخرى غير قيمة غير القيمة ليست 0 (بما في ذلك القيمة الافتراضية التلقائية) ، فسيتم تحديد عرض <Body> من خلال القواعد التالية:
1. إذا كان عرض <Body> قيمة ثابتة ، فهناك الكثير من العرض.
2. إذا كان عرض <Body> هو القيمة الافتراضية التلقائية ، فسيقوم العرض بتغطية مساحة المحتوى لـ <html>.
3. إذا كان <body> نفسه لديه خصائص تقليدية ومحيطات ، مثل وضع وضع: المطلق أو العرض: مضمّن (الشيء الغريب هو تعويم ولكنه لا يرضي هذا العنصر ، فإنه يرضي 2) ، ثم يعتمد على عرض المحتوى.
الحالة الثانية: إذا كان عرض <html> هو 0 ، فإن النقطتين الأولى والثالثة هي نفسها كما هو مذكور أعلاه ، والنقطة الثانية ، إذا كان عرض <Body> هو القيمة الافتراضية التلقائية ، فإن العرض سيتكيف مع المحتوى ، ولكن لن يكون هناك ظاهرة رائعة ، فهذه هي المركز الثاني - لن يكون ذلك في المرحلة الثانية ، فستصبح المركز الثاني في الوقت الذي يصبح فيه المرحلة الثانية ، وسيصبح هذا المركز الثاني. مساحة المحتوى <html> مغطاة بـ <html>. نظرًا لأن عرض <html> هو 0 في هذا الوقت ، فإن عرض <Body> ينهار أيضًا إلى 0.
ثانياً ، ستؤثر إعدادات العرض والارتفاع لـ <html> بشكل مدهش على نسبة مرجع <Body> (أو <Body> التي تحتوي على كتلة).
في اتجاه y ، إذا كان ارتفاع <html> هو القيمة الافتراضية التلقائية ، فإذا كان ارتفاع <Body> يأخذ قيمة نسبة مئوية ، فسيتم تجاهله. ولكن بمجرد أن يكون لقيمة الارتفاع لـ <html> ارتفاع محدد ، حتى لو كانت 0 ، سيتم تطبيق نسبة ارتفاع <Body>. ولكن الأمر الغريب هو أن مرجع الحساب لهذا الارتفاع المئسي ليس ارتفاع <HTML> فقط المحدد ، ولكن مجموع ارتفاعات حشوة الحدود الهامش لارتفاع منطقة العرض ناقص <html>.
في اتجاه X ، إذا أخذ العرض القيمة الافتراضية التلقائية ، وكان اتجاه Y مختلفًا ، فلن يتم تجاهل عرض النسبة المئوية لـ <Body> ، لكن مرجع الحساب الخاص به لا يزال غريبًا مثل اتجاه Y ، يطرح مجموع عرض حشوة الحدود الهامش من <html> لعرض منفذ العرض. إذا كان للعرض قيمة محددة ، فسيتم استبداله كمرجع عرض النسبة المئوية لـ <Body>.
مرة أخرى ، عندما يتم تعيين <Body> على الموضع: مطلق ، سيكون لون الحدود <html> غير صالح. هذا خطأ آخر مذهل.
أخيرًا ، تعتمد الكتلة المحتوية الأولية مستطيلًا للمنفذ ، وهو أمر طبيعي بشكل أساسي. ولكن من المستحيل إنشاء كتلة تحتوي على عناصر مكونة تمامًا. ولكن ربما تكون الكتلة المحتوية التي أنشأتها <html> هي مستطيل الرؤية ، من يدري.
إنه فوضوي للغاية. إنه ليس فقط رأسًا كبيرًا ولكن أيضًا رأسًا كبيرًا بعد فرزه. لا أعرف ما إذا كان بإمكانك رؤيته بوضوح بعد النظر إلى الوراء في المستقبل. IE7 آه IE7 ... أريد أن أقول إنني أحبك كثيرًا ...
أوضاع IE5 والمرولات◎ <html> و <body> يتم تجاهل جميع إعدادات العرض والارتفاع وتبقى مليئة بمناطق المشاهدة.
◎ <html> لا يتم قبول الحشو والهامش.
◎ <Body> قبول الحشو والهامش ، ولكن الهامش السلبي ليس له تأثير بصري ، ولكن سيتم إحضاره عند حساب المعلمات المقابلة الأخرى.
سوف يتم نقل الحدود والخلفية وغيرها من السمات الأخرى للأعلى إلى عنصر <html>.
◎ كتلة تحتوي على حافة الحشو <body>.
فائدةهذا الملخص مستمد من مشكلة التخطيط في البداية. مشكلة التصميم هي واحدة من استخداماتها. سأعيد كتابة منشور لفرزها لاحقًا. لكن هذا التصميم لا يستخدم سوى بعض الميزات ، ويجب أن يكون هناك المزيد من الإمكانات للضغط ، لذلك دراستها ببطء.