Eskalatorga minish orqali tushuntirilgan CSS suzishlari

Agar siz biron-bir eskalatorga sakrab tushgan bo'lsangiz, u holda siz suzishni tezda tushunishingiz mumkin.

Sizning

deyarli mukammal. Siz bir necha elementlar orasidagi munosabatlarni o'rnatish uchun ba'zi bir suzish vositalarini joriy etishga qaror qilasiz.

Keyingi narsa, bilasizki, sizning yangi qavatlangan elementlaringiz ehtiyotkorlik bilan tanlangan buyurtmangizdan sakrab chiqadi va divanga magnit kabi yopishadi. "Kutilmagan xatti-harakatlar" iborasi xayolga keladi.

Men shaxsan suzishni tushunish uchun ko'p vaqt sarfladim. Men bir maqolani o'qib, "Oh, bu mantiqiy!" Deb aytardim. Keyin o'z kodimga qaytardim, sinab ko'rdim va muvaffaqiyatsiz. Chizilgan taxtaga qaytish.

Sizni bu taqdirdan qutulish uchun qo'ldan kelgancha harakat qilaman.

Floatlar alternativ oqimlarni yaratadi. Bu tushunish qiyin bo'lgan qism. Va siz ularni tanishtirganingizdan so'ng, kodingizni uchta oqimdan iborat bo'lishi kerak: normal, chap va o'ng. Bu elementlarning kengligini yoki ularning joylashishini aniqlashdan farqli o'laroq, qoidalarning to'liq to'plamidir.

Aslida, suzish eskalator minish dinamikasiga juda o'xshash va men ularni divanlar ichida aniq munosabatlarni yaratish uchun aniq mulk bilan birga qanday foydalanish mumkinligini ko'rsatmoqchiman. Shunday qilib, keyingi safar kodingizda float-larni ishlatmoqchi bo'lganingizda, siz hech qanday kutilmagan hodisalarga duch kelmaysiz.

Pass chizig'ini hurmat qilish kerak

Elementlarning standart oqimi yuqoridagi rasmga o'xshash. Ba'zi bir yigit o'rtada qo'li bilan panjara ustida turibdi. U butun eskalatorni quchoqlamoqda. Uni hech kim o'tolmaydi. Eskalatorning odob-axloq qoidalari, haqiqatan ham.

U xuddi shu ishni qilayotgan boshqa bir guruh odamlar orqasida turibdi, shuning uchun ularni hech kim o'tolmaydi. Yo'laklar yoki insonning asosiy odob-axloq tushunchasi yo'q.

Siz umuman suzuvchi vositalardan foydalanmasangiz, bu senariy.

Mayli, endi gaplashyapmiz! Ba'zi bir xabardorlik darajasini ko'rsatadigan odamlar. Buni ko'rishni yaxshi ko'raman.

Bizda bitta bo'lak chapda, o'ng tomonda esa boshqa bo'lak shakllangan. Boshqa odamlar, agar xohlasalar, turib turgan ikki odamning atrofida osongina harakat qilishlari va eskalatorni tezroq ko'tarishlari mumkin. Hech kim o'rtada turib, oqimga to'sqinlik qilmaydi.

Divda floats-dan foydalanganda senariy shu. Chap oqim va o'ng oqim mavjud va suzuvchi bo'lmagan elementlar suzuvchi elementlar tomonidan olinmagan bo'shliqni osongina to'ldirishi mumkin.

Suzuvchi: chap va o'ng

Suzuvchi vositalar yordamida ikkita yangi oqim paydo bo'lishi mumkin: chap va o'ng.

Va bu o'zgaruvchan qiymatga ega bo'lmagan elementlarning normal oqimiga ushbu elementlar atrofidagi bo'shliqlarni to'ldirishga imkon beradi.

Suzuvchilar oqimlar o'rtasida ushbu yangi munosabatlarni yaratishga imkon beradi.

Agar siz liftning o'rtasida turgan odamlarning bitta qatori bo'lsa, siz yangi tuzilmalar uchun cheklangan imkoniyatlarga ega bo'lasiz. Ammo chap va o'ng ustuningiz bo'lsa, to'satdan siz ba'zi odamlarning o'ng tomonda turishini, boshqalari chapda, boshqalari esa bo'shliqlarni to'ldirishini aniqlay olasiz.

Bu sizga o'qilishi oson va tushunarli kodni yaratishga imkon beradi, chunki float xususiyati elementning atrofdagi elementlarga aloqasi to'g'risida ham ma'lumot beradi.

Aniq mulk

Biz hali muhokama qilmagan yana bir ajin bor: aniq mulk. "Clear" elementlarga joylashtirilgan elementlarga nisbatan qayerda hizalanishi kerakligini belgilashga imkon beradi.

"Floats" bo'limining birinchi rasmida ikkita eskalator chavandoz eskalatorning har ikki tomonida ehtiyotkorlik bilan turishgan. Bu boshqalarga ularga o'tib, o'zlari xohlagancha erkin harakatlanishlariga imkon beradi.

Aytaylik, bitta suzuvchi chap element va bitta suzuvchi o'ng element o'rniga bizda 3 ta chap element va o'ngda 1 ta element bor edi. Chapdagi uchta suzuvchi element, agar ularga "aniq: chap" xususiyatini bersak, chapdagi satrda yig'ilib ketadi. Ammo agar ular gorizontal ravishda suzuvchi o'ng element bilan hizalansa, bu elementlarning normal oqimi o'tishini qiyinlashtirishi yoki hatto imkonsiz qilishi mumkin:

"Aniq: chap" chap tomonda suzuvchi har bir kishiga, ular chap tomonga qo'yilgan birinchi elementning orqasida hizalanishlari kerakligini aytadi. Pastki ikki kishining kattaligiga qarab, har qanday normal elementlarning siqib chiqishi va yuqori o'ngdagi bo'sh joyni egallashi qiyin bo'lishi mumkin. Shunday qilib, hatto yaxshi eskalator amaliyotlari ham hali ham to'siqlarga olib kelishi mumkin.

Aniq mulkdan tez-tez foydalaniladigan narsalardan biri bu "aniq: ikkalasi". Bu o'ng, chap va normal oqimni davom ettirishdan farqli o'laroq, elementlar oqimini qayta tiklashga imkon beradi. Eskalatordagi chamadonni olib kelgani uchun u butun makonni egallagan yigitga o'xshaydi.

"Aniq: ikkalasi" bilan, bitta yigitning chamadoniga qarab turgani muhim emas. Uning chapda yoki o'ngda turgani muhim emas. U hanuzgacha butun eskalatorni to'sib turibdi. Unga ergashadigan odamlar yangi oqimlarni boshlashlari kerak bo'ladi, ular uchta oqimning har birini o'z ichiga olishi mumkin: chap, o'ng yoki normal.

U uch oqimli tizimdan qochib, qoidalarni qayta o'rnatdi. Eskalatorni ishga tushirishni istagan odamlar uchun yomonmi? Albatta. Ammo siz biron bir kishining o'tib ketishini to'xtatmoqchi bo'lsangiz yaxshi bo'ladi.

Eskalatorning o'rtasida, xuddi shu ishni bajarayotgan odamlar qatori ortida turgan jentlenddan qanday farq qilishiga e'tibor bering. Bu bitta oqimli tizim edi. "Aniq: ikkalasi" uchta oqim bo'lishi mumkinligini tan oladi va undan keyingi har qanday elementning o'tishiga to'sqinlik qiladi.

Agar sizga ushbu xabar yoqsa, CSS va JavaScript mavzularini aniqlash, masalan, joylashishni aniqlash, Model-View-Controller va qo'ng'iroqlarni qaytarish kabi boshqa tushuntirishlarimdan bahramand bo'lishingiz mumkin.

Va agar bu sizning holatingizdagi boshqa odamlarga yordam berishi mumkin deb o'ylasangiz, unga "yurak" bering!

Ushbu xabar dastlab CodeAnalogies blogida paydo bo'ldi.