لقد قرأت العديد من الكتب وقرأت العديد من المقالات من قبل، وهي عبارة عن معرفة أساسية مجزأة بتخطيط CSS، وهي سطحية نسبيًا لقد وجدت في "الدليل النهائي لـ CSS" لرايلي أن مفهوم تدفق المستندات المذكور فيه جعلني حساسًا للغاية. لسوء الحظ، لم يشرح الكتاب ما هو تدفق المستندات. ربما اعتقد المؤلف أنه من السهل جدًا ذكره لكنني أعتقد أن هذا المفهوم مهم حقًا، بعد فهمه، أصبح من السهل فهم مجموعة من نظريات تخطيط CSS، وأدركت عقلانية تصميم CSS، وبناءً على تخميناتي وتجاربي، توصلت إلى هذا البيان إذا كان هناك أي أخطاء، فهو أمر طبيعي تمامًا.
يقسم تدفق المستند النموذج إلى صفوف من الأعلى إلى الأسفل، ويرتب العناصر في كل صف من اليسار إلى اليمين، وهو ما هو تدفق المستند.
يحتل كل عنصر غير عائم على مستوى الكتلة سطرًا خاصًا به، وتطفو العناصر العائمة في أحد طرفي السطر كما هو مطلوب. إذا لم يكن السطر الحالي مناسبًا، فسيتم تعويمه في سطر جديد.
لن تشغل العناصر المضمنة صفًا واحدًا، ويمكن لجميع العناصر تقريبًا (بما في ذلك عناصر مستوى الكتلة والعناصر المضمنة وعناصر القائمة) إنشاء صفوف فرعية لوضع العناصر الفرعية.
هناك ثلاث حالات تؤدي إلى وجود عناصر خارج تدفق المستند، وهي تحديد الموضع العائم، والموضع المطلق، والموضع الثابت. ولكن في IE، توجد العناصر العائمة أيضًا في تدفق المستند (مما يجعلني أعتقد أن هذا أمر معقول>).
لا تشغل العناصر العائمة أي مساحة تدفق عادية للمستند، ولا يزال موضع العناصر العائمة يعتمد على تدفق المستند العادي، ثم يتم استخراجها من تدفق المستند ونقلها إلى أقصى حد ممكن إلى اليسار أو اليمين. سيتم التفاف محتوى النص حول العنصر العائم. عندما يتم استخراج عنصر من تدفق المستند العادي، فإن العناصر الأخرى التي لا تزال في تدفق المستند تتجاهل العنصر وتملأ مساحته الأصلية.
سبب الخلط بين المفهوم العائم هو تفسير المتصفح للنظرية. لا يمكن إلا أن نقول أن العديد من الناس يستخدمون IE كمعيار، ولكن في الواقع ليس كذلك.
استنادًا إلى تدفق المستندات، يمكننا بسهولة فهم أنماط تحديد المواقع التالية:
الموضع النسبي، أي الإزاحة بالنسبة إلى موضع العنصر في تدفق المستند، ولكن مع الاحتفاظ بالعنصر النائب الأصلي.
الموضع المطلق، أي أنه خارج تدفق المستند بالكامل، والإزاحة والموضع الثابت بالنسبة إلى أقرب عنصر أصلي بقيمة غير ثابتة لسمة الموضع، الموضع المطلق، أي خارج تدفق المستند تمامًا، والإزاحة بالنسبة إلى
والتي
لا أفهمها.
1. كأحد العناصر الأساسية الثلاثة، ما هو الفرق الرئيسي بين العناصر المضمنة والعناصر على مستوى الكتلة؟
2. كيف تفهم عندما تأخذ السمة الواضحة القيمة الصحيحة؟ يبدو أن الوضع التجريبي يتعارض دائمًا مع النظرية.
ماذا يعني العنصر المضمن؟ ما هي عناصر مستوى الكتلة.
يظهر النص الصيني "دليل CSS النهائي": أي عنصر مرئي ليس عنصرًا على مستوى الكتلة هو عنصر مضمن. ما يميز أدائه هو شكل "تخطيط الصف". ويعني "تخطيط الصف" هنا أن شكل التعبير الخاص به يتم عرضه دائمًا في صفوف. على سبيل المثال، عندما نقوم بتعيين عنصر سطري border-bottom:1px Solid #000;، سيتم تكراره في كل صف، وسيكون هناك خط أسود رفيع أسفل كل صف. إذا كان عنصرًا على مستوى الكتلة، فسيظهر الخط الأسود المعروض أسفل الكتلة فقط.
غالبًا ما تسمى العناصر مثل p أو h1 أو div بعناصر مستوى الكتلة، ويتم عرض هذه العناصر ككتلة من المحتوى؛ وتسمى العناصر مثل Strong وspan بالعناصر المضمنة، ويتم عرض محتواها في السطر، أي ، "مربع مضمن". (يمكنك استخدام العرض = كتلة لتحويل العناصر المضمنة إلى عناصر كتلة. العرض = لا شيء يعني أن العنصر الذي تم إنشاؤه ليس له إطار على الإطلاق، ولا يعرض العنصر ولا يشغل مساحة في المستند)
ج: العناصر المضمنة هي عناصر داخل صف ولا يمكن وضعها إلا داخل سطر؛ أما العناصر على مستوى الكتلة فهي مجرد مربع من أربعة مربعات ويمكن وضعها في أي مكان بالصفحة.
ب: بصراحة، العنصر المضمّن يشبه الكلمة؛ والعنصر على مستوى الكتلة يشبه الفقرة. إذا لم يتم تعريفه بطريقة أخرى، فسوف يظهر في السطر الخاص به.
C: عناصر عامة على مستوى الكتلة مثل الفقرة <p>، العنوان <h1><h2>...، القائمة، <ul><ol><li>، الجدول <table>، النموذج <form>، DIV<div > والجسم <body> وعناصر أخرى. العناصر المضمنة مثل: عناصر النموذج <input>، الارتباطات التشعبية <a>، الصور <img>، <span>…..
د: الميزة البارزة للعناصر على مستوى الكتلة هي أن كل عنصر على مستوى الكتلة يبدأ في العرض على سطر جديد، ويجب أيضًا عرض العناصر اللاحقة على سطر جديد.
E: <span> هو عنصر مضمن في تعريف CSS، بينما <div> هو عنصر على مستوى الكتلة.
بالنسبة لأولئك الذين تعلموا CSS، يمكنهم فهمها على الفور. ولكن ليس من السهل على المبتدئين أن يفهموا ذلك، لذلك أريد بشكل أساسي أن أجعله مألوفًا أكثر للمبتدئين!
سيؤدي استخدام حاوية الكلمات إلى تسهيل فهم وجودها والغرض منها بصريًا. العناصر المضمنة تعادل الحاويات الصغيرة، بينما <div> تعادل الحاوية الكبيرة. <span>إنها حاوية صغيرة، وبهذه الطريقة قد يكون لديك انطباع أولي في ذهنك إذا أردنا وضع بعض الماء في حاوية كبيرة. ولكن ماذا لو أردت أيضًا وضع بعض الحبر فيه؟ الأمر بسيط للغاية. نخرج الحاوية الصغيرة ونملأها بالحبر ونضعها في الماء النظيف في الحاوية الكبيرة.
دعني أعطيك مثالاً عمليًا بسيطًا: على سبيل المثال <div>أنا أحب CSS - 52CSS.com</div>
أريد تصميم الحرف c باستخدام CSS، حتى نتمكن من استخدام <span>.
<div>أنا أحب CSS - <span>52CSS.com</span> معيار W3C</div>
عنصر الكتلة بشكل عام هو عنصر حاوية للعناصر الأخرى. تبدأ عناصر الكتلة عمومًا في سطر جديد ويمكنها استيعاب العناصر المضمنة وعناصر الكتلة الأخرى خاص جدًا، ويمكن استخدامه فقط للاحتفاظ بعناصر الكتلة الأخرى.
بدون مساعدة CSS، سيتم ترتيب عناصر الكتلة صفًا واحدًا في كل مرة. باستخدام CSS، يمكننا تغيير وضع التخطيط الافتراضي لـ HTML ووضع عناصر الكتلة في المكان الذي تريده. بدلًا من أن تبدأ بغباء سطرًا جديدًا في كل مرة. تجدر الإشارة إلى أن علامة الجدول هي أيضًا نوع من عناصر الكتلة. ينظر التخطيط القائم على الجدول والتخطيط المستند إلى CSS إلى هذين التخطيطين من منظور المستخدمين العاديين (باستثناء الأشخاص ضعاف البصر والمكفوفين وما إلى ذلك)، باستثناء سرعة تحميل الصفحة باستثناء الفرق لا يوجد فرق آخر. ومع ذلك، إذا قام مستخدم عادي بالنقر دون قصد على زر عرض الكود المصدري للصفحة، فسيكون الفرق بين الاثنين كبيرًا جدًا. يمكن للكود المصدري لصفحة تخطيط CSS، المصمم بناءً على مفاهيم إعادة الإعمار الجيدة، أن يسمح على الأقل للمستخدمين العاديين الذين ليس لديهم خبرة في تطوير الويب بفهم المحتوى بسرعة. من هذا المنظور، يجب أن يتمتع كود تخطيط CSS بتجربة جمالية أفضل.
يمكنك التفكير في عنصر div لحاوية الكتلة كمربعات، أو إذا كنت قد لعبت مع القطع، فسيكون من الأسهل فهمه. نقوم أولاً بقص المقالات الضرورية من الصحف والمجلات المختلفة. كل قطعة من المحتوى المقطوع عبارة عن كتلة. ثم قمنا بلصق هذه القطع من الورق على قطعة جديدة من الورق الفارغ وفقًا لهدفنا التخطيطي. سيشكل هذا ملخصًا فريدًا خاصًا بك. كامتداد للتكنولوجيا، يتبع تصميم تخطيط الويب نفس النمط.
تعتمد العناصر
المضمنة
بشكل عام على العناصر الأساسية على المستوى الدلالي.يمكن للعناصر المضمنة أن تحتوي فقط على نص أو عناصر مضمنة أخرى، والعنصر المضمن المشترك "a" هو.
يعد عنصر الكتلة (عنصر الكتلة) والعنصر المضمن (العنصر المضمن) مفاهيم في مواصفات HTML. الفرق الأساسي بين عناصر الكتلة والعناصر المضمنة هو أن عناصر الكتلة تبدأ عمومًا بسطر جديد. عند إضافة عنصر تحكم CSS، فإن اختلاف السمة بين عناصر الكتلة والعناصر المضمنة لم يعد فرقًا. على سبيل المثال، يمكننا إضافة سمة مثل العرض: كتلة إلى الاستشهاد بالعنصر المضمن، بحيث يكون له أيضًا سمة البدء من سطر جديد في كل مرة.
المفهوم الأساسي للعنصر القابل للتغيير هو أنه يحتاج إلى تحديد ما إذا كان العنصر عنصر كتلة أو عنصرًا مضمنًا بناءً على السياق. لا تزال العناصر المتغيرة تنتمي إلى فئتي العناصر المذكورتين أعلاه، بمجرد أن يحدد السياق فئتها، يجب أن تتبع قواعد عناصر الكتلة أو العناصر المضمنة. انظر النص الكامل لتصنيف العناصر التقريبية.
فيما يتعلق بالاسم الصيني للعنصر المضمن، هناك أنواع عديدة من العناصر المضمنة والعناصر المضمنة والعناصر المضمنة والعناصر المضمنة. في الأساس لا توجد ترجمة موحدة، فقط أطلق عليها ما تريد. بالإضافة إلى ذلك، عند الحديث عن العناصر المضمنة، سنفكر في سمة عرض تسمى Display:inline؛ يمكن لهذه السمة إصلاح مشكلة الحدود العائمة المزدوجة الشهيرة في IE.
عنصر الكتلة
* العنوان - العنوان * blockquote - مرجع الكتلة * المركز - كتلة المحاذاة * dir - قائمة الدليل * div - مستوى الكتلة شائع الاستخدام، وكذلك التسمية الرئيسية لتخطيط CSS * dl - قائمة التعريف * مجموعة الحقول - مجموعة التحكم في النموذج * النموذج - نموذج التفاعل * h1 - العنوان * h2 - عنوان فرعي * h3 - عنوان المستوى 3 * h4 - عنوان المستوى 4 * h5 - عنوان المستوى 5 * h6 - عنوان المستوى 6 * hr - خط التقسيم الأفقي * isindex - موجه الإدخال
* القائمة - قائمة القائمة * noframes - محتوى الإطارات الاختياري، (يتم عرض محتوى الكتلة هذا للمتصفحات التي لا تدعم الإطارات) * noscript - محتوى البرنامج النصي الاختياري (يتم عرض هذا المحتوى للمتصفحات التي لا تدعم البرنامج النصي)
* ol - نموذج مفروز * p - فقرة * نص منسق مسبقًا * جدول - جدول * ul -
عنصر سطري لقائمة غير مرتبة (عنصر سطري)
* أ - نقطة الربط * abbr - اختصار * اختصار - الكلمة الأولى * ب - غامق (غير مستحسن)
* bdo - تجاوز ثنائي الاتجاه
* كبير - خط كبير * br - فاصل أسطر * اقتباس - اقتباس * الكود - كود الكمبيوتر (مطلوب عند الاستشهاد بكود المصدر)
* dfn - تحديد الحقول * em - التأكيد * الخط - إعدادات الخط (غير مستحسن)
* i - مائل * img - صورة * الإدخال - مربع الإدخال * kbd - تحديد نص لوحة المفاتيح * التسمية - تسمية الجدول * q - اقتباس قصير * s - تسطير (غير مستحسن)
* samp - يحدد نموذج رمز الكمبيوتر * حدد - اختيار العنصر * صغير - نص بخط صغير * امتداد - حاوية مضمنة شائعة الاستخدام، يحدد الكتل داخل النص * ضربة - تسطير * قوي - تركيز غامق * فرعي - منخفض * سوب - مرتفع * منطقة النص - مربع إدخال نص متعدد الأسطر * tt - نص Teletype * u - تسطير * var - تحديد المتغيرات
العناصر المتغيرة تحدد العناصر المتغيرة ما إذا كان العنصر هو عنصر كتلة أو عنصر سطري وفقًا للسياق.
* التطبيق الصغير - برنامج جافا
* زر - زر * ديل - حذف النص * iframe - إطار مضمن
* الإضافية - النص المدرج * الخريطة - كتلة الصورة (الخريطة)
* كائن - كائن كائن * البرنامج النصي - البرنامج النصي للعميل