Sadržaj
Ponoć je, i to ona div na vašoj web lokaciji i dalje izgleda kao dječja igračka. Svi su elementi zbrkani i svaki put kad se igrate s CSS-ovima prikaz vlasništvo, preuređuju se u sasvim drugačiju glupost.
Ako ste poput mene, to ćete vjerojatno riješiti mrmljajući ispod glasa i postajući stalno agresivniji s tipkovnicom. I premda mi je ta strategija već uspjela, nedavno sam krenuo u potragu za boljim načinom razumijevanja prikaz imovine.
Ispada osnove prikaz mnogo su jednostavnije nego što sam prvotno mislio. Zapravo koriste iste principe kao i pakiranje kofera. Ja ću pokriti prikaz: blok, inline-blok i u redu. Ako ste i prije uredno slagali kovčeg, vidjet ćete paralelu. Ako ste ona vrsta osobe koja vam naključno nabija svu odjeću - pa, mogu vam učiniti samo toliko toga.
Naš će kofer sadržavati tri vrste odjeće:
- Nježne, poput košulje s ovratnikom
- Majice koje se mogu smotati
- Čarape ili donje rublje koje se mogu trpati u praznine
Za referencu, kad bismo kofer modelirali u HTML-u, to bi izgledalo ovako:
div class = 'kofer'> div class = 'nježan'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'majica'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'majica'> / div> / div>
Nježni predmeti na vrhu
Zaslon: blok je zadana za većinu HTML elemenata. To znači da element zauzima čitav vodoravni prostor unutar svog spremnika div. Ako je pored ostalih bratskih elemenata, započet će novi redak, a neće dopustiti druge elemente na svojoj liniji. Slično je osjetljivim predmetima koje stavite na vrh kofera. To su nježni ili pametni članci poput košulja s ovratnikom. Ne želite da se naboraju, pa pazite da ne budu odgurnuti drugim dijelovima odjeće.
Ovo donosi jedan od najtežih dijelova prikaz: blok. Primijetite kako košulja s ovratnikom ne zauzima cijelu širinu kofera? To ne znači da će drugi predmeti skočiti na svoju razinu. Recimo da je ova košulja 60 posto širine kofera; i dalje bi blokirao pridruživanje ostalih elemenata na najvišoj razini.
Zbog toga je na slici narančasti obrub. A prikaz: blok element će automatski dodati marginu oko sebe ako ne zauzima cijeli vodoravni prostor.
Uredno spakirane majice
Većina vašeg kofera vjerojatno je puna ostatka odjeće za vaše putovanje. Radi jednostavnosti ovo ćemo svesti na samo majice. Na internetu postoji velika rasprava o tome je li preklapanje ili valjanje učinkovitije. Ja sam sklopiva vrsta osobe.
Svejedno, kako biste stali u većinu predmeta, poredate majice jednu do druge. Upravo je to prikaz: ugrađeni blok je namijenjen za. Ti elementi mogu sjediti jedan pored drugog na istoj liniji, kao i pored prikaz: inline elementi.
Za razliku od prikaz: inline elementi, an inline-blok element premjestit će se na sljedeći redak ako ne stane u njegov sadržaj div uz drugu inline-blok elementi. Da bi se majica prelila na sljedeći red, trebate je prepoloviti, a preostalu polovicu upotrijebiti za započinjanje novog reda. Ugrađeni blok elementi se ne smiju dijeliti na pola ako ne odgovaraju na liniju.
Čarape koje popunjavaju praznine
Vratite se izvornom HTML-u i primijetit ćete da postoji jedna čarapa div> između osam majica. Ali pogledajte vodoravni prikaz kofera s desne strane. Ako postoji jedna čarapa div>, kako može završiti srednji red i započeti donji red? To je svrha prikaz: inline!
An u redu element prelit će se na sljedeći redak ako premaši širinu div (na taj se način razlikuje od inline-blok ili blok). Od naših čarapa div pun je čarapa koje se slučajno trpaju u praznine, lako može početi popunjavati prazninu na desnoj strani srednjeg reda i preliti se da započne donji red.
Da bi se to dogodilo, nećete morati prepoloviti čarape. Zbog toga mogu postati u redu, dok majice mogu biti samo inline-blok. Ako su majice u srednjem redu zauzimale samo 60 posto širine, čarape div> pomaknuo bi se gore da popuni cijeli prostor u ostatku reda.
Sretan put
Ovo je konačni CSS za naš kofer:
.delicate {prikaz: blok; širina: 60%; } .tshirt {prikaz: inline-block; širina: 20%; } .čarape {display: inline; }
Evo nekoliko alternativnih scenarija za ilustraciju različitih namjena prikaza. Kad bi delikatesi na vrhu imali prikaz: ugrađeni blok, uklopili bi se odmah uz majice. Neke bi se majice pomakle do gornje crte, a ostatak bi se prilagodio u skladu s tim. S lijeve i desne strane košulje s ovratnikom ne bi bilo udobnog tampona.
Kad bi svaka majica imala zaslon-blok, imali biste masivan niz majica jednu na drugu, jednu po liniji. Da su čarape imale prikaz: ugrađeni blok, svi bi sjedili u donjem redu, a ne da bi tekli između dva reda. Neke bi majice bile gurnute u drugi red, tvoreći četvrti red. Desno od srednjeg reda majica bio bi praznina.
Metodom koju sam ovdje izložio na kraju imamo uredno spakiran kovčeg koji najbolje koristi raspoloživi prostor.
Ovaj se članak izvorno pojavio u neto magazin izdanje 289; kupi ovdje!
