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

الأساسيات: ماذا يوجد في الصندوق؟

قبل أن نخوض في التفاصيل، من المفيد أن نلخص نموذج الصندوق. كل عنصر في صفحتك هو عبارة عن مربع (نعم، حتى العناصر التي لا تبدو مربعة الشكل في الواقع). قد تكون الصناديق داخل و/أو تحتوي و/أو بجانب صناديق أخرى.

نموذج الصندوق ينطبق عليها جميعها ويتكون من:

• صندوق المحتوى: عنصر HTML أو عنصر CSS زائف حيث يوجد المحتوى الفعلي الخاص بك - النص والصور وما لديك.
• الحشوة: المسافة بين المحتوى الخاص بك والحدود.
• الحدود: الخط الذي يلتف حول الحشو والمحتوى.
• الهامش: المساحة الموجودة خارج الحدود والتي تدفع العناصر الأخرى بعيدًا.

لذا فإن كل عنصر HTML تقريبًا داخل

الاختلافات الرئيسية بين العناصر المضمنة وعناصر الكتلة

من الضروري فهم الاختلافات الرئيسية في كيفية تأثير نموذج الصندوق على العناصر المضمنة مقابل عناصر الكتلة:

1. العرض: يتم توسيع عناصر الكتلة لملء الحاوية الخاصة بها بشكل افتراضي. العناصر المضمنة؟ إنها تشغل مساحة كافية لمحتواها.

2. الارتفاع: بالنسبة لعناصر الكتلة، فإن الحشو والحدود والهامش كلها ستزيد من الارتفاع. تظل العناصر المضمنة ضمن ارتفاع الخط، بغض النظر عن الحشو الرأسي أو الحدود.

3. تأثير التخطيط: تؤثر عناصر الكتلة على التخطيط الأفقي والرأسي. تدور العناصر المضمنة حول التدفق الأفقي، مع الحد الأدنى من التأثير على التباعد الرأسي.

4. انهيار الهامش: انهيار الهامش هو سلوك خاص بحظر العناصر، حيث يمكن دمج الهوامش الرأسية المجاورة (بحيث يمكن أن ينهار الهامش السفلي: 20 بكسل على عنصر واحد إلى هامش أعلى: 20 بكسل على العنصر التالي، مما يؤدي إلى إنشاء هامش واحد بحجم 20 بكسل). العناصر المضمنة لا تلعب هذه اللعبة.

الآن بعد أن عرفنا مكونات نموذج الصندوق والفرق بين العناصر المضمنة والعناصر المحظورة، دعونا نرى كيف تتأثر مربعات المحتوى بخاصية تغيير حجم الصندوق وفقًا لما إذا كانت عنصرًا مضمّنًا أو عنصرًا مكوّنًا.

تحجيم الصندوق: صندوق المحتوى مقابل صندوق الحدود

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

1. مربع المحتوى مع العناصر المضمنة

عند تغيير حجم الصندوق: يتم تطبيق مربع المحتوى على عنصر مضمّن:

• العرض والارتفاع: يتم تحديد العرض فقط من خلال المحتوى. تتم إضافة الحشو والحدود والهامش أعلى هذا العرض.
• تأثير التخطيط: نظرًا لأن العناصر المضمنة لا تقطع تدفق النص، فإن عرض العنصر يكون بعرض المحتوى فقط. الحشو والحدود العمودية موجودة بشكل مرئي ولكنها لا تؤثر على ارتفاع الخط المحيط.

2. صندوق المحتوى مع عناصر الكتلة

عند تغيير حجم الصندوق: يتم تطبيق مربع المحتوى على عنصر الكتلة:

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

3. مربع الحدود مع العناصر المضمنة

عند تغيير حجم المربع: يتم تطبيق مربع الحدود على عنصر مضمّن:

• العرض والارتفاع: يشمل العرض المحتوى والحشو والحدود. تتقلص منطقة المحتوى لاستيعاب الحشو والحدود ضمن العرض المحدد.
• تأثير التخطيط: لا يزال يتم تحديد عرض العنصر من خلال المحتوى، ولكن يتم الآن تضمين الحشو والحدود ضمن هذا العرض. تظل الحشوات والحدود العمودية موجودة بشكل مرئي ولكن لا تغير ارتفاع الخط.

4. مربع الحدود مع عناصر الكتلة

عند تغيير حجم الصندوق: يتم تطبيق مربع الحدود على عنصر كتلة:

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

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

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

إذا استمتعت بهذا التنزيل على Box Model، فقم بالتمرير فوق هذا المربع على شكل قلب في الجزء العلوي الأيسر وأظهر لهذا المنشور كل الحب!