Kuidas mõista CSS-i hõljumisi kahe lihtsa sushi-paigutuse retsepti abil

Katie Smithi foto saidil Unsplash

Mõni nädal tagasi otsustasin, et peaksin tunnistama kõiki asju, mida ma pole tavalise CSS-i kohta kunagi aru saanud. Prooviksin nendesse sügavalt ja teadlikult sukelduda ning neid saada. Tundus, et nüüd, rohkem kui paar aastat pärast CSS-i esmakordset tundmaõppimist, saaksin kogu oma kogemuse enda jaoks ära kasutada. Seekord peaks see olema lihtsam ja selgem.

Mõtlesin ka endamisi: ma ei saa olla ainus, kes nende omadustega vaeva näeb juba N (või esimest) korda. Minu teekonna dokumenteerimine CSS-i kõige keerukamatesse omadustesse tooks välja suure hulga artikleid, mida teised saaksid kasutada.

Eelmisel kuul avaldasin selle sissejuhatusega positsiooni vara salapärastele paaridele. Siin on minu teine ​​peatus teekonnal:

Ujuki omadus toiduvalmistamise retseptide kujul.

Retseptide register

  • Sushi read - pange elemendid katma terve rida ühtlaselt
  • Puhastuspuljong - ujukite alt leitud sisu toimib normaalselt

Sushi read

Elementide ühtlaseks jaotamiseks kogu (konteineri) laiuses kasutatakse ujukit ja protsendimäära. Täpselt nagu sushi read taldrikul.

Koostis:

  • 1 konteiner või tahvel
  • Mõned sushi tükid, mida peate külg külje kõrval levitama.
  • Märk
  • 1 ujuk: vasak;

Juhised:

Valmistage ette oma sushi tükid, see tähendab elemendid, mida soovite järjest kuvada. Need võivad olla makis, esemekaardid, nigirid, ikoonid, mis iganes teie maitsele sobib.

Neile saate lisada ka mis tahes positsioneerimata stiili: värvid, teksti joondus, fondid, sojakaste.

Pange need plokkmahuti sisse nagu laud. Kõige elementaarsemal kujul peaks see olema div (aga võite kasutada ka muid HTML5 semantilisi elemente, nagu päis, jalus, jaotis, artikkel, peamine). Lisage neile kirjeldav klass. Ma kasutan nigiri.

Nüüd rakendame klasside nigirides mõnda stiili, sealhulgas meie hõljumist: vasak; Võtke natuke aega ja lugege need läbi:

Mis hõljub: vasak; tähendab, et igal elemendil tuleb kleepuda ühele küljele - antud juhul vasakule - ja seista üksteise kõrval vasakult paremale.

Pange tähele, et lisame tahvlile kõrguse. Tavaliselt poleks meil seda vaja: tahvel laieneks, et mahutada kõik, mis selles on. Kuid hõljuvad elemendid, nagu meie nigirid, on erinevad. Need ei hõivata tegelikku dokumendipinda ja ei mõjuta muid hõljuvaid elemente. Sellepärast kasutame tahvli jaoks fikseeritud piksli suurust.

Nüüd peaksite kõiki oma elemente nägema ühel real. Kuid miski pole päris korras. Nad kõik kuhjuvad vasakule ja tõenäoliselt on teie laua paremal küljel palju tühja ruumi.

Peame need ühtlaselt paigutama.

Saame seda teha, määrates protsentuaalse väärtuse abil nigiri laiuse nende konteineri (antud juhul tahvli) suhtes.

Nüüd on see keeruline osa:%, mille peate määrama, sõltub 3 asjast

  • kui palju esemeid sul on
  • kuidas need on sissepoole üles ehitatud (polster)
  • ja kui palju ruumi nende vahel soovite.

Kas soovite, et nad üksteise külge kleepuksid või vajavad nad nende vahel mingit varu? Kui sushi tükkidel on riisipolster, siis on need suuremad kui nende sisu. Peate selle kompenseerima, vähendades nende laiust. Selleks on soovitatav kasutada ka polstriväärtustes%.

Ma tean, et see võib olla segane. Siin on käsitsi valmistatud ühe pressi illustratsioon, mida loodetavasti saan illustreerida selgelt.

Iga nigiri on 33,33% tahvli täislaiusest: 2% veerise mõlemal küljel, 2% polstri mõlemal küljel ja siis 29,33% nende tegelikust laiusest.

Kuid see on retsept, mitte matemaatikatund. Teile lihtsamaks, kallid lugejad, on siin mõned levinumad kombinatsioonid õlgadest õlale ja äärejoonele paigutatud elementidele, kõik koos 1% riisi polsterdusega:

Võib-olla olete siin mustrit märganud: eeldame, et elementidel on 1% polstrit. Nad peavad selle kompenseerima, lahutades elemendi protsentuaalsest laiusest 2% (mõlemal küljel 1%). Sama kehtib ka meie 1% -lise marginaali kohta. Nüüd on mõistlikum mitte kasutada kolme elemendi jaoks järjest 33,33% laiust. Selle asemel seadke see 29,33% -le, jättes 2% polstrist ja 2% marginaaliks mõlemal.

Ohkas ... see oli palju matemaatikat. Olgu, nii et nüüd, ükskõik kui palju tükke teie sushirull tükeldatakse, teate, kuidas neid kenasti tahvlis esitada.

Kui soovite selle seadistusega ringi mängida, on siin spetsiaalselt selleks loodud CodePen.

Ja kui teile meeldivad CSS sushi, siis ärge jätke kahe silma vahele Sasha Transi väga inspireerivat CSS Sushi Boardit.

Kustuta puljong

Ideaalne supp mõne ujuva sushiga, hoolitsedes selle eest, et teie portsjonid ei lõpeks selles ujumisega.

Koostis:

  • Üks konteiner või laud ujuva sushiga
  • Supp või puljong, mida pärast seda järgida.
  • Üks selge: puljong;

Juhised:

Kui olete oma ujuvate sushi tükkide rea valmis, asetage oma supi mahuti nende alla html-sse.

Meie sushi on mõeldud hõlpsalt hõljuma dokumendivoo "kõrgemal" ega mõjuta teisi elemente. Kui me pole ettevaatlikud, võivad nad lihtsalt suppi ujuda ja sushi-ramen pole maailm selleks valmis.

Pidage meeles, et ujuvatel elementidel pole dokumendi tegelikku kõrgust. See tähendab ka, et nad ei suru suppi alla. Vaadake nüüd seda õudset jama:

Selle julmuse vältimiseks peame lisama oma selge: puljong;… ma mõtlen mõlemat!

Meil on siin kaks võimalust:

Saame lihtsalt suppi kaussi või anumasse panna ja anda kausile selge stiili: mõlemad ;. See aitab omamoodi töö ära teha, kuid selle tulemuseks on, et näiteks marginaalid ei tööta üldse kausi peal.

Seega, kui soovime, et sushitükid oleksid supi üleujutuse eest täielikult kaitstud - ja et see ei kaotaks mingeid omadusi -, peame need sisaldama kõrge servaga taldrikus. Selle saavutamiseks lisame sushi plaadile (see tähendab meie väikeste hõljukite konteinerisse) pseudo-elemendi järel:

Siin allpool on veel üks näide, millega saate mängida. Olen teinud plaadi nähtavaks, kasutades kõrgust ja taustavärvi. Ehkki see pole suppi hea asetamise jaoks vajalik, paneb see lihtsalt fantaasia välja nägema

Mõelge sellele, et sushi roog oleks väga kõrge lõunaseinaga, et vältida supi sissevoolu. Aga… nagu… kena sein.

Hea küll, mul on super hea meel, et te selle kaugele jõudsite, ja loodan, et see pisike retseptiraamat aitas teil saada parema ettekujutuse ujukite toimimisest… ja kuidas ujukitega töötada. Olge kursis põhjalikumate sukeldumistega põhilistesse, kuid siiski tabamatutesse asjadesse nagu see this