ЦСС плута објаснио јахањем ескалатора

Ако сте икада скочили на покретне степенице, брзо можете разумети пловке.

Ваш <див> је скоро савршен. Одлучите да уведете неке пловеве да поправите однос између неколико елемената.

Следеће што знате, ваши тек плутајући елементи искачу из пажљиво изабраног реда и залепе се уз бок вашег див као магнет. У обзир долази фраза „ненамерно понашање“.

Лично сам провео сате покушавајући да потпуно разумем плове. Прочитао сам чланак и рекао: „Ох, ово има смисла!“ Затим бих се вратио у свој код, испробао га и ... није успео. Назад на плочи за цртање.

Даћу све од себе да вам поштедим ову судбину.

Плодови стварају алтернативне токове. Ово је најтежи део за разумевање. Кад их једном представите, тада морате написати свој код тако да обухвата до три тока: нормални, леви и десни. Ово је сасвим нови сет правила, за разлику од манипулације ширином елемената или њиховим позиционирањем.

Заправо, пловци су прилично слични динамици вожње ескалатором, а ја ћу показати како се могу користити уз јасно својство за стварање кристално чистих односа унутар дивса. На овај начин, следећи пут када покушате да користите флоатс у вашем коду, нећете наићи на било каква изненађења.

Морам поштовати траку за пролазак

Задани проток елемената је налик горњој слици. Неки момак стоји у средини с руком на оградама. Закачио је цео покретни степеник. Нико га не може мимоићи. Прилично лош етикет за ескалацију, заиста.

Он стоји иза гомиле других људи који раде исту ствар, тако да их ни нико не може мимоићи. Не постоји концепт трака или основне људске пристојности.

То је сценарио када уопште не користите флоатс.

У реду, сада разговарамо! Људи који показују одређени ниво свести. Волим да то видим.

Имамо једну траку са леве стране, а другу траку формирану са десне стране. Остали људи се лако могу кретати око две особе које стоје и мирно корачају по ескалацији, ако желе. Нико не блокира проток тако што стоји у средини.

Ово је сценарио када користите флоатс у вашем диву. Постоји леви ток и десни ток, а елементи који нису плутајући лако могу да попуне простор који не заузимају плутајући елементи.

Плутају: лево и десно

Коришћењем пловака може се увести до два нова тока: лево и десно.

То омогућава нормалном протоку елемената, онима без флоат вредности, да попуњавају просторе око ових елемената.

Плодови вам омогућавају да створите ове нове односе између токова.

Да имате један ред људи који стоји усред лифта, имали бисте ограничене могућности за нове структуре. Али када имате леву и десну колону, одједном можете навести да одређени људи стоје са десне стране, други остају лево, а друга група може попунити празнине.

То вам омогућава да створите читљивији и разумљивији код, јер флоат својство такође даје приказ односа елемента са околним елементима.

Очистите имовину

Постоји још једна бора о којој још нисмо разговарали: чисто својство. „Цлеар“ омогућава елементима да одреде где треба да се поравнају у поређењу са плутајућим елементима.

На првој слици одељка „Плутају“, два возача ескалатора љубазно су стајала на свакој страни ескалатора. То омогућава другима да их прођу и слободно се крећу онако како желе.

Рецимо да уместо да имамо један плутајући леви елемент и један плутајући десни елемент, уместо тога смо имали 3 лебдећа лева елемента и 1 на десној страни. Три лебдећа лева елемента ставила би се у ред на левој страни ако им додијелимо и својство „јасно: лијево“. Али ако се хоризонтално поравнају с плутајућим правим елементом, то може отежати или чак немогуће проћи нормалан проток елемената:

„Цлеар: лефт“ говори свакој особи која плута улево да се требају поравнати иза првог елемента који је плутао лево. У зависности од величине доње две особе, било би тешко да се било који нормални елементи провуку кроз њих и заузму простор у горњем десном углу. Дакле, чак и добре праксе ескалатора и даље могу довести до блокада.

Једна од најчешћих употреба јасног својства је „јасно: обоје“. Ово вам омогућава да ресетирате проток елемената, за разлику од наставка одржавања десног, левог и нормалног протока. То је такав тип на покретној степеници који заузима цео простор јер је донео свој кофер.

Са „јасно: обоје“, није важно где тај један момак стоји оријентисан према свом коферу. Није важно ко стоји лево или десно изнад њега. Још увек блокира цео покретни степеник. Људи који наставе након њега мораће да покрену нови ток елемената, који би могао да укључи било који од три тока: леви, десни или нормални.

Побегао је из система са три протока и ресетовао правила. Лоше за људе који желе покренути покретне степенице? Наравно. Али добро је ако желите да некога спречите да прође.

Примјетите како се то разликује од оног једног господина на почетку који је стајао усред покретне степенице, иза реда људи који су то радили. То је био систем са једним протоком. „Јасно: обоје“ признаје да могу бити до три тока и блокира пролазак било ког елемента који следи.

Ако сте уживали у овом посту, можда ћете уживати и у мојим другим објашњењима изазовних ЦСС и ЈаваСцрипт тема, као што су позиционирање, Модел-Виев-Цонтроллер и повратне информације.

А ако мислите да би ово могло да помогне другим људима у истом положају као и ви, дајте му "срце"!

Овај се пост првобитно појавио на блогу ЦодеАналогиес.