يفسر المغلق CSS بواسطة ركوب المصعد

إذا قفزت على السلالم المتحركة ، يمكنك فهم العوامات بسرعة.

لديك

مثالي تقريبًا. أنت تقرر إدخال بعض العوامات لإصلاح العلاقة بين بعض العناصر.

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

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

سأبذل قصارى جهدي لتجنيبك هذا المصير.

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

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

فلدي احترام ممر المرور

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

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

هذا هو السيناريو عندما لا تستخدم العوامات على الإطلاق.

حسنًا ، الآن نتحدث! الناس تظهر بعض مستوى الوعي. أحب أن أرى ذلك.

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

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

يطفو: اليسار واليمين

يمكن أن يوفر استخدام العوامات تدفقين جديدين: اليسار واليمين.

ويتيح هذا التدفق الطبيعي للعناصر ، تلك التي ليس لها قيمة تعويم ، ملء الفراغات حول هذه العناصر.

العوامات تسمح لك بإنشاء هذه العلاقات الجديدة بين التدفقات.

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

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

الملكية واضحة

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

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

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

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

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

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

لقد نجا من نظام التدفق الثلاثي وإعادة ضبط القواعد. سيئة للأشخاص الذين يرغبون في تشغيل المصعد؟ بالتأكيد. لكن من الجيد إذا كنت تريد منع أي شخص من المرور.

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

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

وإذا كنت تعتقد أن هذا قد يساعد الآخرين في نفس الموقف مثلك ، فامنحه "قلبًا"!

ظهرت هذه المشاركة في الأصل على مدونة CodeAnalogies.