كيف جيدا هل تعرف CSS؟ (+ اختبار صغير)

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

---

للمتعة ، لنبدأ مع الاختبار.

سوف نستخدم النظام الأساسي الذي قمت بتطويره ، والذي يسمى Questionable.io ، واستخدمته لإنشاء اختبار ، والذي سننتقل إليه أدناه. لا تقلق ، لا يتم جمع بيانات شخصية ، والنتائج مجهولة المصدر وهي مجانية تمامًا.

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

يتكون الاختبار من 10 أسئلة ويجب ألا يستغرق أكثر من 10 دقائق

من المترجم:

في نهاية المقال حول هبر ، تم إضافة استطلاع حول عدد النقاط التي تم تسجيلها في الاختبار.

اجتياز الاختبار

ملاحظة: إذا كنت لا تريد تضييع الوقت ، فإليك رابط للأسئلة مع الإجابات الصحيحة.

هل نجحت في الاختبار؟ ! ممتاز دعنا نذهب إلى الأسئلة واحدًا تلو الآخر للحصول على فكرة أفضل عن أنماط التصميم التي تتأثر في الاختبار.

السؤال 1: نموذج بلوك

يجب أن تكون دراسة نموذج الكتل أولوية في قائمة أي مطور FrontEnd. ربما كانت مقالة " CSS Box Model " قديمة بعض الشيء ، ولا تقلل من قيمتها وقيمتها بالنسبة إلى CSS الحديثة. نموذج الكتلة هو الأساس لكل مشكلة تقريبًا تتعلق بتخطيطات CSS.

يتحقق هذا السؤال بالتحديد من كيفية معرفة العرض بناءً على مبادئ نموذج الكتلة. للكتلة عرض واضح من خلال width: 100px ، لكن اتضح أن قواعد نموذج البلوك الافتراضي تطبق خصائص width على طبقة "المحتوى" في هذا الكتلة. العرض الناتج (مدى عرض الكتلة على الصفحة) هو مجموع طبقات المحتوى والحشو والحدود. لهذا السبب ، فإن الجواب هو 112px.

 .box { width: 100px; /* Take this */ height: 50px; padding: 5px; /* Plus this x2 for left and right */ border: 1px solid red; /* Plus this x2 for left and right */ background-color: red; /* = 112px of computed width */ } 

إذا كنت تواجه موقفًا يتم فيه نقل العمود أو علامة التبويب الأخيرة في الواجهة إلى السطر التالي ، على الرغم من أنك حددت لكل width: 20%; وكانوا متأكدين من أنهم سوف يتناسبون مع 100 ٪ من العنصر الأصل ، وربما كان هذا أصبح مشكلة. يتم وضع خمسة أعمدة بعرض 20٪ في 100٪ ، لكن إذا تم إعطاؤهم حشوة و / أو حدود إضافية ، فسيؤدي ذلك إلى زيادة عرض كل منها ، مما لا يترك مساحة كافية في الصف الحالي للعمود الأخير.

عندما تم تقديم CSS3 ، ظهرت أداة جديدة تسمى box-sizing . يسمح لنا بالتحكم في أي طبقة من نموذج الكتلة الذي نريد تطبيق خاصية width عليه. على سبيل المثال ، يمكننا تحديد box-sizing: border-box . هذا يعني أننا نريد تطبيق أي قواعد عرض على طبقة الحدود الخارجية بدلاً من طبقة المحتوى. في السؤال من الاختبار ، إذا تم تطبيق تغيير box-sizing: border-box تم تطبيق خاصية box-sizing: border-box ، كان عرض الكتلة الناتج 100 بكسل.

بالنسبة إلى البعض منكم ، هذه حقيقة معروفة جيدًا ، لكنها تظل تذكيرًا جيدًا لكل من المحترفين والمبتدئين.

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

السؤال 2: حدود العنصر

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


من بين كل الحلول الممكنة المذكورة في سؤال الاختبار ، فإن إضافة border: 2px solid transparent إلى الحالة الأصلية (دون المرور بالمرور) هي الحل الوحيد الممكن للمشكلة. box-sizing لا يحل هذه المشكلة ، لأننا لا نضبط الارتفاع بشكل صريح. إذا قمنا بهذا ، فسيصبح الإطار جزءًا من الارتفاع الكلي للعنصر ولن يحدث التغيير ، لكن هذا ليس حالنا.

هناك حلول أخرى لم نذكرها في خيارات الإجابة. يقوم أحدهم بإضافة حد زائف باستخدام خاصية box-shadow أو استخدام outline بدلاً من border . كل واحد منهم لن يؤدي إلى التحيز ، لأنه ليس طبقة من نموذج الكتلة. إليك مقالة أخرى حول CSS-Tricks حيث يمكنك قراءة المزيد حول هذه الحلول.

ملاحظة:
تذكر أن outline لا يدعم border-radius

السؤال 3: تحديد المواقع - المطلقة مقابل ثابت

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

بادئ ذي بدء ، دعونا ننظر إلى كتلة تحتوي على . التعريف المختصر هو أن الكتلة المحتوية هي في الغالب أصل أي عنصر في السؤال. ومع ذلك ، فإن قواعد الكتلة المحتوية تختلف عن العناصر المحددة تمامًا والثابتة.

1) للعناصر المطلقة . الكتلة المحتوية هي أقرب سلف يكون وضعه غير static . على سبيل المثال ، عندما يتم وضع عنصر بشكل مطلق ويحتوي على الخصائص top أو right أو bottom أو left ، فسيتم وضعها في وضع قريب بالنسبة لأي من الوالدين لديه وضع absolute أو relative أو fixed أو sticky .
2) للعناصر الثابتة . الكتلة المحتوية هي إطار العرض ، على الرغم من وجود أي عناصر رئيسية لها موضع غير static . بالإضافة إلى ذلك ، يختلف سلوك التمرير عن العناصر الموضوعة بشكل مطلق. تبقى العناصر الثابتة "ثابتة" في منطقة العرض ، ومن ثم الاسم.

يعتقد العديد من المطورين أن العناصر ذات الموضع المطلق لا تبحث إلا عن العنصر الأصل الأقرب بموضع position: relative . لقد أصبح هذا المفهوم الخاطئ واسع الانتشار ببساطة لأن position: relative تحديد position: relative غالبًا مع position: absolute لإنشاء كتلة تحتوي على. السبب في كثير من الأحيان يستخدم هذا هو أن الموضع النسبي للكتلة الأصل يتركها في الدفق ، والذي غالبا ما يفضل. هناك حالات يكون فيها الأصل لعنصر محدد تمامًا في وضعه تمامًا. هذا طبيعي تماما. إذا كان جميع الآباء ثابتًا ، فسيتم إرفاق عنصر في وضع العرض تمامًا في إطار العرض - لكن يتم التمرير جنبًا إلى جنب مع إطار العرض.


هناك إضافة غير معروفة إلى القواعد المذكورة أعلاه: في المواقف التي يكون للعنصر الأصل فيها خاصية transform (من بين أمور أخرى ) مع قيمة غير none ، يصبح كتلة تحتوي على عناصر ذات وضع ثابت تمامًا. يمكن رؤية تأكيد هذا في CodePen ، حيث العنصر مع النص "لاحظ!" عنصر ثابت ولديه الأصل خاصية التحويل ، ولكن فقط عندما يكون مؤشر الماوس فوقها (في الحالة :hover )

السؤال 4: انهيار هامش الوالدين والطفل العناصر

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


كل علامة فقرة لها هامش أعلى وأسفل يساوي 1 م ، والذي تم تصميمه بواسطة المستعرض. حتى الآن هذا هو أسهل جزء من الموقف. ولكن لماذا التباعد بين الفقرات ليس 2 م (مجموع الأعلى والأسفل)؟ وهذا ما يسمى هوامش الانهيار من الأشقاء المجاورة. تتداخل الهوامش بطريقة تجعل حجم الهوامش الأكبر هو حجم الفجوة ، وبالتالي ستكون الفجوة في هذه الحالة واحدة.

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

• يوجد حشوة علوية / سفلية أكبر من الصفر
  
• يوجد حد علوي / سفلي أكبر من الصفر
  
• يتم تحديد سياق تنسيق الكتلة الذي يمكن إنشاؤه باستخدام overflow: hidden أو overflow: auto
  
• عرض: مجموعة خاصية تدفق الجذر (دعم متصفح ضعيف)
  

عندما يسعدني أن أوضح للناس تفاصيل CSS الصغيرة هذه وحلها بالحشوة أو الحدود ، فإن الإجابة تكون دائمًا تقريبًا: "ماذا عن الحشوة أو الحدود التي تساوي 0؟". حسنًا ، هذا لا يعمل ، لأن القيمة يجب أن تكون عددًا صحيحًا موجبًا.

في المثال السابق ، يسمح لنا الحشو 1px بالتبديل بين استخدام الانهيار ومنع هوامش انهيار الأصل والطفل. الفجوة التي تظهر بين الفقرة الأولى / الأخيرة والوالدة هي الحشو 1px ، ولكن الهامش الآن يعتبر داخل الحاوية ، لأن طبقة الحشو تنشئ حاجزًا لمنع الهوامش من الانهيار.

بالنسبة للسؤال ، أنا متأكد من أنك تستطيع رؤية المشكلة في هذه الواجهة:


العنصر الأول مع فئة .comment (بدون فئة .moderator ) ينهار الهوامش. حتى بدون النظر إلى الكود ، يمكننا أن نرى أن العنصر مع فئة .moderator لديه إطار ، والعنصر بدون هذه الفئة لا. في الواقع ، كانت هناك ثلاث إجابات على هذا السؤال تم اعتبارها صحيحة ، فكل منها ، في الواقع ، مطبق بالفعل في مصدر CodePen ، لقد تم التعليق عليها للتو.

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

السؤال 5: النسبة المئوية من ماذا؟

عند استخدام وحدات النسبة المئوية ، تعتمد النسب المئوية على عرض أو ارتفاع الكتلة التي تحتوي على (عادة ما يكون الأصل). كما قلنا سابقًا ، سيصبح عنصر بخاصية transform كتلة تحتوي على ، لذلك عندما تستخدم العنصر التحويل ، فإن الوحدات في المئة (فقط transform ) على حجم العنصر الخاص ، وليس على حجم الأصل.

في المثال أدناه ، يمكننا أن نرى أن 50٪ يأخذون قيمتين مختلفتين حسب السياق. تحتوي الكتلة الحمراء الأولى على خاصية margin-left: 50% ، بينما تستخدم الكتلة الحمراء الثانية transform: translateX(50%) .

السؤال 6: نموذج كتلة الضربات مرة أخرى ...

فقط كنت تعتقد أننا قد انتهينا من الحديث عن نموذج كتلة ...


تكمن المشكلة في حقيقة أننا نستخدم width: 100% للتذييل وفي نفس الوقت نضيف الحشو. عرض الحاوية هو 500 بكسل ، مما يعني أن طبقة محتوى التذييل (100٪) هي 500 بكسل أيضًا قبل إضافة الحشوات إلى هذا الحجم.

يمكن إصلاح المشكلة عن طريق أحد الأساليب الشائعة اثنين:

1. استخدم خاصية تغيير حجم المربع لتذييل الصفحة مباشرة أو عن طريق إعادة التعيين المذكورة سابقًا
   
2. قم بإزالة خاصية width من العنصر واستخدم left: 0 right: 0 خصائص بدلاً من ذلك. هذا مثال جيد على استخدام الخصائص right في نفس الوقت. تتجنب هذه الطريقة مشكلات نموذج الكتلة ، لأن خاصية width ستستخدم القيمة الافتراضية auto لملء أي مساحة متاحة بين الحشو والحدود عند left: 0 right:0 .
   

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

الحقيقة بالنسبة لي هي أنه لدي دائمًا خاصية تغيير box-sizing: border-box خاصية box-sizing: border-box كجزء من إعادة تعيين النمط العام الخاص بي. إذا فعلت نفس الشيء ، فغالبًا ما تواجه هذه المشكلة. لكن ما زلت أحب هذه التقنية في تحديد الخصائص left:0 right:0 في نفس الوقت ، لأنه ، كما يوضح الوقت ، هو أكثر موثوقية (في أي حال ، بناءً على تجربتي) من حل مشاكل نموذج البلوك التي تنشأ بسبب العرض 100٪.

السؤال 7: توسيط العناصر المطلقة والثابتة

الآن بدأنا بالفعل في الجمع بين جميع المواد المذكورة أعلاه ، مع تركيز العناصر المطلقة والثابتة:


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

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

السؤال 8: توسيط العناصر في التدفق الطبيعي

جلبت لنا Flexbox العديد من الأدوات المذهلة لحل مشاكل التصميم المعقدة. قبل إصداره ، تم الإبلاغ عن أن التمركز الرأسي كان أحد أكثر الميزات المعقدة التي تم تنفيذها في CSS. مع ظهور Flexbox ، أصبح التمركز الرأسي روتينيًا:

 .parent { display: flex; } .child { margin: auto; } 

https://codepen.io/bradwestfall/pen/GPNmbM
ملاحظة : لاحظ أنه بالنسبة للعناصر المرنة ، الهامش: تلقائي يتم تطبيقه على الجانب العلوي والسفلي واليمين واليسار لتوسيط العنصر رأسياً وأفقياً. في السابق ، لم يعمل توسيط عمودي لعناصر الكتلة ، لذلك margin: 0 auto; شائع جدًا margin: 0 auto;

السؤال 9: الحسابات مع وحدات مختلفة

يعد استخدام وظيفة calc () أمرًا رائعًا عندما تحتاج إلى العمل مع وحدتي قياس لا يمكننا إضافتهما بمفردنا أو عندما نحتاج إلى جعل الكسور أسهل في الفهم . يقدم لنا سؤال الاختبار هذا معرفة كيف ستبدو نتيجة التعبير calc(100% + 1em) ، بدءًا من حقيقة أن عرض عنصر div هو 100 بكسل. قد يكون هذا مربكًا بعض الشيء ، لأنه في الواقع ، لا يهم أن يكون عرض عنصر div 100 بكسل. تبدأ النسب المئوية دائمًا من عرض الأصل ، لذلك كانت الإجابة الصحيحة هي: "100٪ من الكتلة التي تحتوي على (الأصل) بالإضافة إلى 1em".

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


الخصوصية هنا هي أننا نريد إنشاء قائمة منسدلة يمكن استخدامها مع عناصر الاتصال ذات الأحجام المختلفة (في هذه الحالة ، حجمان مختلفان من الأزرار). لا نعرف ما هو ارتفاع عنصر الاتصال بهذه القائمة ، لكننا نعرف ذلك top: 100% سيضع الحافة العلوية من القائمة المنسدلة في الحافة السفلية من زر الاتصال. إذا كانت كل قائمة يجب أن تكون في الحافة السفلية من الزر المقابل ، بالإضافة إلى 0.5 م ، يمكن تحقيق ذلك باستخدام calc(100% + 0.5em) . بالطبع ، يمكننا أيضًا استخدام top: 110% ، لكن هذه 10٪ الإضافية ستعتمد على ارتفاع زر الاتصال والحاوية.

السؤال 10: الهوامش السلبية

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


التأثير الناتج هو "الحدود المشتركة" التي يتم عرضها بين الأزرار. في الواقع ، لا يمكن أن يكون للأزرار حد مشترك ، لذلك نحن بحاجة إلى استخدام تقنية الهامش السلبي بحيث يتداخل إطار ما مع الآخر. بعد ذلك ، استخدم z-index لتعيين الإطار الذي أريد احتوائه فوق إطار آخر ، استنادًا إلى حالة مؤشر الماوس. لاحظ أن z-index مفيد هنا حتى بدون استخدام الموضع المطلق ، لكن كان عليك تعيين position: relative . إذا استخدمت تقنية إزالة الإطار الأيسر من الزر الثاني ، فسيكون تنفيذ هذا التأثير أكثر صعوبة.

كل ذلك منطقي.

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


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

1. لن يكون من الممكن احتواء وجود ثلاثة مربعات بعرض 33.33% بالاقتران مع الهامش في صف واحد. على الرغم من أن تغيير box-sizing يسمح لنا .tile والحدود على عنصر .tile 33.33% ، فإن هذا لن يساعدنا في حالة الهوامش - مما يعني أن العرض المحسوب للبلاط الثلاثة سيكون أكثر من 100 ٪ ، مما سيجبر البلاط الأخير على الانتقال إلى التالي الخط.
   
2. لم تعد البلاطات اليسرى واليمنى تقع على حافة الحاوية.
   

يمكن حل المشكلة الأولى مع calc((100% / 3) - 1em). وهو ما يعني 33.33 ٪ ناقص الهوامش اليمنى واليسرى من كل البلاط. لن يحدث انهيار العناصر الشقيقة المجاورة هنا ، لأنه لا يمكن تحقيقه إلا في الهامش العلوي والسفلي. نتيجة لذلك ، فإن المسافة الأفقية بين اثنين من البلاط هي مجموع هوامش (1 م). في هذه الحالة ، لا ينطبق الانهيار أيضًا على الهوامش العلوية والسفلية ، لأن التجانين الأول والأخير غير متجاورتين تقنيًا ، حتى لو كان أحدهما مرئيًا تحت الآخر.

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

نتيجة لذلك ، نحصل على مربعات تحتوي على مسافات كافية تتسع من الحافة إلى الحافة بحيث تتماشى مع علامات الفقرات المجاورة خارج التجانبات.

هناك العديد من الطرق لصنع البلاط (وعادة ما يكون لها مزايا وعيوب). على سبيل المثال ، هناك حل CSS Grid أنيق للغاية تحدث عنه Haydon Pickering. يتم تطبيق هذا الحل باستخدام تقنية تحاكي طلبات الحاويات (ولكن باستخدام الشبكة السحرية). في نهاية المطاف ، فإن الحل الذي يستخدمه Grid أفضل من flexbox ، وهو ما أثبتته ولكن دعمه أسوأ للمتصفح.

ملخص

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

بالمناسبة ، هناك عدد من الموارد الممتازة التي تدرس بعناية موضوع نموذج الكتلة. بادئ ذي بدء ، مقالات راشيل أندرو وجين سيمونز ، والتي تستحق القراءة بالتأكيد.

• Box Alignment Cheatsheet عبارة عن مادة رائعة تحتوي على عناصر مرئية تؤكد على الخصائص المختلفة التي تؤثر على كيفية محاذاة العناصر إما بمفردها أو بالنسبة للعناصر الأخرى.
  
• Jen Simmons Labs — , .