بدون مساعدة CSS، سيتم ترتيب عناصر الكتلة صفًا واحدًا في كل مرة. باستخدام CSS، يمكننا تغيير وضع التخطيط الافتراضي لـ HTML ووضع عناصر الكتلة في المكان الذي تريده. بدلًا من أن تبدأ بغباء سطرًا جديدًا في كل مرة. تجدر الإشارة إلى أن علامة الجدول هي أيضًا نوع من عناصر الكتلة. ينظر التخطيط القائم على الجدول والتخطيط المستند إلى CSS إلى هذين التخطيطين من منظور المستخدمين العاديين (باستثناء الأشخاص ضعاف البصر والمكفوفين وما إلى ذلك)، باستثناء سرعة تحميل الصفحة باستثناء الفرق لا يوجد فرق آخر. ومع ذلك، إذا قام مستخدم عادي بالنقر دون قصد على زر عرض الكود المصدري للصفحة، فسيكون الفرق بين الاثنين كبيرًا جدًا. يمكن للكود المصدري لصفحة تخطيط CSS، المصمم بناءً على مفاهيم إعادة الإعمار الجيدة، أن يسمح على الأقل للمستخدمين العاديين الذين ليس لديهم خبرة في تطوير الويب بفهم المحتوى بسرعة. من هذا المنظور، يجب أن يتمتع كود تخطيط CSS بتجربة جمالية أفضل.

يمكنك التفكير في عنصر div لحاوية الكتلة كمربعات، أو إذا كنت قد لعبت مع القطع، فسيكون من الأسهل فهمه. نقوم أولاً بقص المقالات الضرورية من الصحف والمجلات المختلفة. كل قطعة من المحتوى المقطوع عبارة عن كتلة. ثم قمنا بلصق هذه القطع من الورق على قطعة جديدة من الورق الفارغ وفقًا لهدفنا التخطيطي. سيشكل هذا ملخصًا فريدًا خاصًا بك. كامتداد للتكنولوجيا، يتبع تصميم تخطيط الويب نفس النمط.

تعتمد العناصر المضمنة بشكل عام على العناصر الأساسية على المستوى الدلالي. يمكن للعناصر المضمنة أن تحتوي فقط على نص أو عناصر مضمنة أخرى، والعنصر المضمن المشترك "a" هو.

يعد عنصر الكتلة (عنصر الكتلة) والعنصر المضمن (العنصر المضمن) مفاهيم في مواصفات HTML. الفرق الأساسي بين عناصر الكتلة والعناصر المضمنة هو أن عناصر الكتلة تبدأ عمومًا بسطر جديد. عند إضافة عنصر تحكم CSS، فإن اختلاف السمة بين عناصر الكتلة والعناصر المضمنة لم يعد فرقًا. على سبيل المثال، يمكننا إضافة سمة مثل العرض: كتلة إلى الاستشهاد بالعنصر المضمن، بحيث يكون له أيضًا سمة البدء من سطر جديد في كل مرة.
المفهوم الأساسي للعنصر القابل للتغيير هو أنه يحتاج إلى تحديد ما إذا كان العنصر عنصر كتلة أو عنصرًا مضمنًا بناءً على السياق. لا تزال العناصر المتغيرة تنتمي إلى فئتي العناصر المذكورتين أعلاه، بمجرد أن يحدد السياق فئتها، يجب أن تتبع قواعد عناصر الكتلة أو العناصر المضمنة. انظر النص الكامل لتصنيف العناصر التقريبية.

ملاحظة: فيما يتعلق بالاسم الصيني للعنصر المضمن، هناك أنواع عديدة من العناصر المضمنة والعناصر المضمنة والعناصر المضمنة والعناصر المضمنة. في الأساس لا توجد ترجمة موحدة، فقط أطلق عليها ما تريد. بالإضافة إلى ذلك، عند الحديث عن العناصر المضمنة، سنفكر في سمة عرض تسمى Display:inline؛ يمكن لهذه السمة إصلاح مشكلة الحدود العائمة المزدوجة الشهيرة (الهامش العائم) في IE.
عنصر الكتلة
* العنوان - العنوان
* اقتباس كتلة - اقتباس كتلة
* مركز - كتلة محاذاة المركز
* دير - قائمة الدليل
* div - مستوى الكتلة الشائع الاستخدام هو أيضًا العلامة الرئيسية لتخطيط CSS
* دل - قائمة التعريفات
* مجموعة الحقول - مجموعة التحكم في النموذج
* النموذج - النموذج التفاعلي
* h1 - العنوان
* h2 - العنوان الفرعي
*h3 - عنوان المستوى 3
*h4 - عنوان المستوى 4
*h5 - عنوان المستوى 5
*h6 - عنوان المستوى 6
*hr - مقسم أفقي
* isindex - موجه الإدخال
* القائمة - قائمة القائمة
* noframes - محتوى اختياري للإطارات، (اعرض محتوى الكتلة هذا للمتصفحات التي لا تدعم الإطارات
*noscript -) محتوى البرنامج النصي الاختياري (اعرض هذا المحتوى للمتصفحات التي لا تدعم البرنامج النصي)
*ol - نموذج الفرز
* ع - فقرة
* نص منسق مسبقًا
* طاولة - طاولة
* ul - عنصر مضمن في القائمة غير المصنفة (عنصر مضمن)
* أ - نقطة الربط
*abbr - اختصار
* اختصار - الكلمة الأولية
* ب - غامق (غير مستحسن)
* bdo - تجاوز ثنائي الاتجاه
* كبير - الخط كبير
* ر - فاصل الأسطر
* استشهد - اقتبس
* الكود - كود الكمبيوتر (مطلوب عند الاستشهاد بكود المصدر)
* dfn - تحديد الحقول
* م - التركيز
* الخط - إعدادات الخط (غير مستحسن)
* ط - مائل
* الصورة - الصورة
* الإدخال - صندوق الإدخال
* kbd - تحديد نص لوحة المفاتيح
* التسمية - تسمية الجدول
*ف - اقتباس قصير
* s - شرطة (غير مستحسن)
* samp - يحدد نموذج التعليمات البرمجية للكمبيوتر
* اختر - اختيار العنصر
* صغير - نص بخط صغير
* الامتداد - حاوية سطرية شائعة الاستخدام لتحديد الكتل داخل النص
* الضربة - خط الوسط
*قوي - تأكيد جريء
* فرعي - منخفض
* سوب - مرتفع
* منطقة النص - مربع إدخال نص متعدد الأسطر
*tt - نص التلكس
* ش - الشرطة السفلية
* var - يحدد عنصرًا متغيرًا متغيرًا - العنصر المتغير هو عنصر كتلة أو عنصر مضمّن اعتمادًا على السياق.
* التطبيق الصغير - برنامج جافا
* زر - زر
* ديل - حذف النص
* iframe - إطار مضمّن
* الإضافية - النص المدرج
* الخريطة - كتلة الصورة (الخريطة)
* كائن - كائن كائن
* البرنامج النصي - البرنامج النصي للعميل