دفق المستندات CSS ، عناصر مستوى الكتلة ، وعناصر مضمّنة (مضمّنة). وجدني Reilly <CSS دليل تدفق المستندات المذكورة فيه هذا المفهوم مهم حقًا. إذا كان هناك أي خطأ ، فهو طبيعي بحت. يقسم تدفق المستندات النموذج من أعلى إلى أسفل إلى صفوف ، ويصفر عناصر في كل صف بالترتيب من اليسار إلى اليمين ، وهو تدفق المستند. هناك بعض الأسئلة الأخرى التي لا أفهمها 1. كعنصر مضمّن ، أحد العناصر الأساسية الثلاثة ، ما هو الفرق الرئيسي بينه وعناصر مستوى الكتلة؟ ماذا تعني العناصر المضمنة؟ ما هو عنصر مستوى الكتلة. يوضح النص الصيني لـ "دليل CSS الموثوق" أن أي عنصر مرئي ليس عنصرًا على مستوى الكتلة هو عنصر مضمّن. سمة تعبيرها هي شكل "تخطيط الصف". على سبيل المثال ، عندما نقوم بتعيين عنصر حدودي عنصر مضمّن: 1 بكسل صلب #000 ؛ ، يتم تكراره في كل سطر ، وسيكون هناك خط أسود رفيع أسفل كل سطر. إذا كان عنصرًا على مستوى الكتلة ، فستظهر الخطوط السوداء المعروضة أسفل الكتلة فقط. اسمحوا لي أن أعطيك مثالًا عمليًا بسيطًا: على سبيل المثال <Div> أحب CSS - 52CSS.com </div> تعتمد العناصر المضمنة بشكل عام على العناصر الأساسية الدلالية. يمكن للعناصر المضمنة استيعاب النص أو العناصر المضمنة الأخرى فقط ، والعنصر المضمون المشترك "A". عنصر كتلة عنصر مضمّن عنصر متغير العنصر المتغير هو عنصر كتلة أو عنصر مضمّن يعتمد على السياق.
يحتل كل عنصر على مستوى الكتلة صفًا واحدًا ، ويطفو العنصر العائم في أحد طرفي الصف وفقًا للوائح.
لا تشغل العناصر المضمنة صفًا واحدًا تقريبًا.
هناك ثلاث حالات من شأنها أن تتسبب في وجود العنصر خارج دفق المستندات ، وهي تحديد المواقع المطلقة ، وتحديد المواقع الثابتة. .
لا يشغل العنصر العائم أي مساحة تدفق وثيقة طبيعية ، ويستند وضع العنصر العائم على تدفق المستند العادي ، ثم يستخرج من تدفق المستند وينتقل إلى اليسار أو اليمين قدر الإمكان. سوف يحيط محتوى النص بالعنصر العائم. عندما يتم استخراج عنصر من دفق المستند العادي ، فإن عناصر أخرى لا تزال موجودة في دفق المستندات ستتجاهل العنصر وتملأ مساحته الأصلية.
السبب الجذري للمفاهيم العائمة هو تفسير المتصفح للنظرية. لا يسعني إلا أن أقول إن الكثير من الناس يستخدمون IE كمعيار ، لكنه ليس كذلك.
بناءً على تدفق المستندات ، يمكننا بسهولة فهم أنماط تحديد المواقع التالية:
تحديد المواقع ، أي الإزاحة بالنسبة لموقف العنصر في دفق المستند.
يعني تحديد المواقع المطلقة منفصلة تمامًا عن دفق المستندات ، ويتم إزاحةه وتحديد المواقع الثابتة بالنسبة لأقرب عنصر من العناصر الوالدية في قيمة الموضع غير المنتظمة ، أي ، يتم فصله تمامًا عن دفق المستند ، ويتم إزاحةه بالنسبة إلى منفذ المشاهدة.
2. كيف تفهم عندما تأخذ السمة الواضحة القيمة الصحيحة؟
غالبًا ما تسمى عناصر مثل P أو H1 أو Div عناصر على مستوى الكتلة ، ويتم عرض هذه العناصر كقطعة من المحتوى ؛ وهذا هو ، "مربع في الخط". (يمكنك استخدام Display = كتلة لتحويل العناصر في الصف إلى عناصر الكتلة. العرض = لا شيء يعني أن العنصر الذي تم إنشاؤه لا يحتوي على مربع على الإطلاق ، ولا يعرض العناصر ، ولا يشغل مساحة في المستند)
ج: الخط هو عنصر داخل الخط ، ولا يمكن وضعه إلا في الخط ؛
ب: بصراحة ، فإن العنصر في السطر يشبه الكلمة ؛
C: العناصر العامة على مستوى الكتلة مثل الفقرة <p> ، العنوان <H1> <H2> ... ، قائمة ، <ul> <ol> <li> ، الجدول <الطاولة> ، النموذج <Porm> ، div <viv> و عناصر الجسم مثل <body>. العناصر المضمنة مثل: عناصر النماذج <prope> ، الارتباطات التشعبية <a> ، الصورة <img> ، <span> .....
D: الميزة المميزة للاختفاء على مستوى الكتلة هي أن كل عنصر على مستوى الكتلة يتم عرضه من خط جديد ، ويجب أيضًا عرض الخفاء اللاحق من سطر آخر.
E: <span> ينتمي إلى عنصر مضمّن في تعريف CSS ، في حين أن <viv> عنصر على مستوى الكتلة.
بالنسبة لأولئك الذين درسوا CSS ، يمكنك فهمها في البداية. لكن ليس من السهل على المبتدئين فهمها ، لذلك أشرح ذلك بشكل أساسي للمبتدئين أكثر دراية!
سيؤدي استخدام الحاوية إلى فهم وجودها والغرض بشكل واضح. حاوية صغيرة. <span> هي حاوية صغيرة. ولكن ماذا علي أن أفعل إذا أردت وضع بعض الحبر فيه؟ الأمر بسيط للغاية.
أرغب في استخدام CSS لتحديد نمط الرسالة C ، حتى نتمكن من استخدام <span>.
<div> أحب CSS - <span> 52css.com </span> W3C Standard </div>
عادةً ما يكون عنصر الحية من العناصر الأخرى. .
بدون تأثير CSS ، سيتم ترتيب عناصر الكتلة بالترتيب على التوالي في كل مرة. باستخدام CSS ، يمكننا تغيير وضع التخطيط الافتراضي لهذا HTML ووضع عناصر الكتلة في الموضع الذي تريده. بدلاً من بدء خط آخر بغباء في كل مرة. تجدر الإشارة إلى أن علامة الجدول هي أيضًا نوع من عنصر الكتلة. السرعة. ومع ذلك ، إذا انقر المستخدم العادي بطريق الخطأ على زر شفرة مصدر صفحة العرض ، فسيكون الفرق بين الاثنين كبيرًا جدًا. يمكن أن يسمح الكود المصدري لصفحة تخطيط CSS المصممة بناءً على مفهوم إعادة الإعمار الجيد للمستخدمين العاديين على الأقل دون تطوير الويب بفهم المحتوى بسرعة. من هذا المنظور ، يجب أن يكون لعلاج رمز تخطيط CSS تجربة جمالية أفضل.
يمكنك أن تتخيل عنصر حاوية الكتلة Div كمربعات ، أو إذا كنت قد لعبت بمقالات مقطع ، فسيكون من الأسهل فهمه. قمنا أولاً بقطع المقالات التي نحتاجها من مختلف الصحف والمجلات. كل قطعة قطع هي كتلة. ثم نقوم بإعادة صياغة هذه الأجزاء من الورق على قطعة جديدة فارغة من الورق وفقًا لنوايا التخطيط الخاصة بنا. سيشكل هذا أخبار Digest الفريدة الخاصة بك. كامتداد للتكنولوجيا ، يتبع تصميم تخطيط الويب نفس النمط. .
العناصر الحظر والعناصر المضمنة هي مفاهيم في مواصفات HTML. الفرق الأساسي بين عناصر الكتلة والعناصر المضمنة هو أن عناصر الحظر تبدأ عمومًا بخطوط جديدة. ومع ذلك ، عند إضافة التحكم في CSS ، لن يصبح فرق السمة بين عناصر الكتلة والعناصر المضمنة فرقًا. على سبيل المثال ، يمكننا إضافة Cite element element إلى الشاشة: سمة block ، بحيث يمكن أن يكون لها أيضًا سمات تبدأ من خط جديد في كل مرة.
المفهوم الأساسي للعنصر المتغير هو أنه يحتاج إلى تحديد ما إذا كان العنصر عنصر كتلة أو عنصر مضمّن بناءً على العلاقة السياقية. لا تزال العناصر المتغيرة تنتمي إلى فئتي العناصر أعلاه. انظر النص الكامل لتصنيف العناصر العامة.
فيما يتعلق بالاسم الصيني للعنصر المضمن ، هناك العديد من العناصر المضمنة والعناصر المضمنة والعناصر المضمنة والعناصر المباشرة. لا توجد ترجمة موحدة بشكل أساسي ، فقط نسميها ما تريد. بالإضافة إلى ذلك ، عندما يتعلق الأمر بالعناصر المضمنة ، فإننا نعتقد أن هناك سمة عرض يتم عرضها: INLINE ؛
* العنوان - العنوان * blockquote - مرجع بلوك * المركز - محاذاة كتل في قائمة الرفع * dir - قائمة الدليل * div - مستوى الكتلة الشائعة الاستخدام أمر سهل وأيضًا العلامة الرئيسية لتخطيط CSS * DL - قائمة التعريف * Fieldset - Fieldet - Fieldet مجموعة* نموذج - نموذج التفاعل* H1 - العنوان الكبير* H2 - Subtitle* H3 - المستوى 3 العنوان* H4 - المستوى 4 العنوان* H5 - المستوى 5 العنوان* H6 - المستوى 6 العنوان* HR - مقسم أفقي* ISINDEX - موجه الإدخال
* قائمة - قائمة القائمة * noframes - إطارات المحتوى الاختياري ، (عرض محتوى الكتلة هذا للمتصفحات التي لا تدعم الإطار * noscript - محتوى البرنامج النصي الاختياري (عرض هذا المحتوى للمتصفحات التي لا تدعم البرنامج النصي)
* OL - SORT FORM * P - PRAGRAPH * PRE - تنسيق النص * الجدول - الجدول * UL - قائمة غير موصولة
* A - نقطة مرساة * Abbr - Abbreviation * اختصار - الكلمة الأولى * B - BOLD (غير موصى بها)
* BDO - Bidi تجاوز
* كبير - خط كبير * BR - كسر الخط * Cite - QUOTE * رمز - رمز الكمبيوتر (مطلوب عند اقتباس رمز المصدر)
* DFN - تعريف الحقول * em - التأكيد على * إعدادات الخط (غير الموصى بها)
* I - Italic * IMG - Picture * Inport - مربع الإدخال * KBD - تحديد نص لوحة المفاتيح * التسمية - تسمية الجدول * Q - مرجع قصير * S - علامة متوسطة (غير موصى بها)
* SAMP - تحديد مثال رمز الكمبيوتر * SELECT - اختيار المشروع * نص خط صغير صغير * تمتد - حاويات مضمنة شائعة الاستخدام ، تحديد الكتل داخل النص * Strike - دراجة متوسطة * قوية - تركيز جريء * Sub - Subcript * sup - superscript * Textarea - مربع إدخال نص متعدد السطر * TT - Teletext * U - Underscore * var - تحديد المتغيرات
* Applet - Java Applet
* زر - زر * del - حذف النص * iframe - إطار مضمّن
* INS - نص إدراج* خريطة - كتلة الصورة (خريطة)
* كائن - كائن كائن* البرنامج النصي - البرنامج النصي العميل