CSS plava, razloženo z vožnjo tekočih stopnic

Če ste kdaj skočili na tekoče stopnice, potem lahko hitro razumete plove.

Vaš

je skoraj popoln. Odločili ste se, da boste uvedli nekaj floatov, s katerimi boste lahko popravili odnos med nekaj elementi.

Naslednja stvar, ki jo veste, vaši novoplavljeni elementi skočijo iz vašega skrbno izbranega reda in se kot magnet držijo ob strani svojega diva. Prihaja nam na pamet stavek „nenamerno vedenje“.

Osebno sem preživel ure in poskušal popolnoma razumeti plovec. Prebral sem članek in rekel: "Oh, to je smiselno!" Potem se vrnem k kodi, preizkusim in ... ne uspem. Nazaj na risalno ploščo.

Potrudil se bom, da vam prihranim to usodo.

Pluti ustvarjajo izmenične tokove. To je najtežji del za razumevanje. Ko jih enkrat predstavite, morate kodo napisati tako, da predstavlja do tri tokove: normalno, levo in desno. To je popolnoma nov sklop pravil, v nasprotju z manipulacijo s širino elementov ali njihovim nameščanjem.

Pravzaprav so plovci precej podobni dinamiki vožnje tekočih stopnic in pokazal bom, kako se lahko uporabljajo skupaj z jasno lastnostjo za ustvarjanje kristalno čistih odnosov znotraj divjev. Tako naslednjič, ko poskusite uporabiti floats v kodi, ne boste naleteli na nobena presenečenja.

Moram spoštovati pas za prehod

Privzeti pretok elementov je nekako podoben zgornji sliki. Nek fant stoji na sredini z roko na ograji. Obesi celotno tekočo stopnico. Nihče ga ne more mimo. Precej slab etiket tekočih stopnic, res.

On stoji za kopico drugih ljudi, ki delajo isto stvar, zato jih tudi nihče ne more mimo. Ni koncepta pasov ali osnovne človeške spodobnosti.

To je scenarij, ko floatov sploh ne uporabljate.

V redu, zdaj govorimo! Ljudje, ki kažejo neko stopnjo zavedanja. To bi rad videl.

Imamo en vozni pas, oblikovan na levi, in drugi vozni pas, oblikovan na desni. Ostali ljudje se zlahka premikajo po osebi, ki mirujeta, in hitreje hodita po tekočih stopnicah, če hočeta. Nihče ne blokira toka tako, da stoji na sredini.

To je scenarij, ko v floskuli uporabljate floats. Obstajata levi in ​​desni tok, elementi, ki niso lebdeči, pa zlahka zapolnijo prostor, ki ga ne zavzamejo lebdeči elementi.

Lebdi in desno

Uporaba plovcev lahko uvede do dva nova toka: levo in desno.

In to omogoča, da normalen pretok elementov, tisti brez float vrednosti, zapolni prostore okoli teh elementov.

Pluti vam omogočajo ustvarjanje teh novih odnosov med tokovi.

Če bi sredi dvigala stala ena vrsta ljudi, bi imeli omejene možnosti za nove strukture. Ko pa imate levi in ​​desni stolpec, nenadoma lahko določite, da nekateri ljudje stojijo na desni, drugi ostanejo levo in druga skupina lahko zapolni vrzeli.

To vam omogoča, da ustvarite bolj berljivo in razumljivo kodo, ker lastnost float prav tako kaže na odnos elementa do okoliških elementov.

Počisti lastnost

Obstaja še ena guba, o kateri še nismo razpravljali: jasna lastnost. »Počisti« omogoča elementom, da določijo, kje naj se poravnajo v primerjavi s plavajočimi elementi.

Na prvi sliki odseka "Ploveci" sta dva kolesarja vljudno stala na obeh straneh tekočih stopnic. To drugim omogoča, da jih prenesejo in se prosto gibljejo, kot želijo.

Recimo, da smo namesto enega lebdečega levega elementa in enega lebdečega desnega elementa imeli 3 lebdeče leve elemente in 1 na desni strani. Trije lebdeči levi elementi bi se zložili v vrstico na levi strani, če jim damo tudi lastnost »jasno: levo«. Če pa se vodoravno poravnajo s plavajočim desnim elementom, bi lahko normalen pretok elementov zelo otežil ali celo nemogoče:

"Počisti: levo" pove vsaki plavajoči levi, da se morajo poravnati za prvim lebdečim elementom. Glede na velikost spodnjih dveh ljudi bi lahko bilo težko, da se vsi običajni elementi prebijejo in zavzamejo prostor zgoraj desno. Torej lahko celo dobra praksa tekočih stopnic še vedno privede do blokade.

Ena najpogostejših načinov uporabe lastnosti lastnosti je jasno: oboje. To vam omogoča ponastavitev pretoka elementov, v nasprotju z ohranitvijo desnega, levega in običajnega pretoka. Takšen je na tekočem traku, ki zavzame ves prostor, ker je prinesel svoj kovček.

Z "jasno: oboje", ni pomembno, kje ta fant stoji v orientaciji do svojega kovčka. Ni pomembno, kdo stoji levo ali desno nad njim. Še vedno blokira celotno tekoče stopnico. Ljudje, ki stopijo za njim, bodo morali začeti nov tok elementov, ki bi lahko vključeval katerega koli od treh tokov: levi, desni ali običajni.

Pobegnil je iz sistema s tremi pretoki in ponastavil pravila. Slabo za ljudi, ki želijo zagnati tekoče stopnice? Seveda. Dobro pa je, če želite nikogar preprečiti, da bi ga prehitel.

Opazite, kako se to razlikuje od tistega enega gospoda na začetku, ki je stal sredi tekočih stopnic, za nizom ljudi, ki so delali isto. To je bil sistem z enim tokom. "Jasno: oboje" priznava, da so lahko do trije tokovi, in blokira prehod katerega koli elementa, ki sledi.

Če ste uživali v tej objavi, boste morda uživali tudi v mojih drugih razlagah zahtevnih tem CSS in JavaScript, kot so pozicioniranje, Model-View-Controller in povratne klice.

In če mislite, da bi to lahko pomagalo drugim v enakem položaju kot vi, mu dajte "srce"!

Ta objava se je prvotno pojavila na spletnem dnevniku CodeAnalogies.