Vsebina
Polnoč je, in to tista div na vašem spletnem mestu še vedno izgleda kot otroška skrinja za igrače. Vsi elementi so zmedeni in vsakič, ko se igrate s CSS-ji zaslon lastnine, se preuredijo v povsem drugačne neumnosti.
Če ste takšni kot jaz, boste to verjetno rešili tako, da boste mrmrali pod nos in postali vedno bolj agresivni s tipkovnico. In čeprav mi je ta strategija že uspevala, sem se pred kratkim lotil iskanja boljšega načina za razumevanje zaslon lastnine.
Izkazalo se je osnove zaslon so veliko preprostejši, kot sem sprva mislil. Pravzaprav uporabljajo enaka načela kot pakiranje kovčka. Bom pokrival zaslon: blok, vrstica-blok in v vrsti. Če ste kovček že urejeno uredili, boste videli vzporednico. Če ste takšna oseba, ki naključno zabije vsa vaša oblačila - no, za vas lahko naredim le toliko.
Naš kovček bo vseboval tri vrste oblačil:
- Občutljiv, kot majica z ovratnikom
- Majice, ki se lahko zvijejo
- Nogavice ali spodnje perilo, ki jih lahko natlačimo v vrzeli
Za referenco, če bi kovček modelirali v HTML-ju, bi izgledal takole:
div class = 'suitcase'> div class = 'občutljivo'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'nogavice'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'majica'> / div> / div>
Občutljivi predmeti na vrhu
Zaslon: blok je privzeto za večino elementov HTML. To pomeni, da element zaseda celoten vodoravni prostor znotraj vsebnika div. Če je poleg drugih sorodstvenih elementov, bo začel novo vrstico in ne bo dovolil drugih elementov v svoji vrstici. Podobno je občutljivim predmetom, ki jih postavite na vrh kovčka. To so občutljivi ali pametni izdelki, kot so majice z ovratnikom. Nočete, da se nagubajo, zato poskrbite, da ne bodo potisnjeni ob druge kose oblačil.
To prikaže enega najtežjih delov zaslon: blok. Opazite, kako srajca z ovratnikom ne zaseda celotne širine kovčka? To ne pomeni, da bodo drugi predmeti poskočili na svojo raven. Recimo, da je ta srajca 60 odstotkov širine kovčka; še vedno bi preprečil, da bi se drugim elementom pridružili na najvišji ravni.
Zato je na sliki oranžna obroba. A zaslon: blok element bo samodejno dodal rob okoli njega, če ne zavzame celotnega vodoravnega prostora.
Lepo zapakirane majice
Večina vašega kovčka je verjetno polna preostalih oblačil za potovanje. Zaradi poenostavitve bomo to zmanjšali na samo majice. Na internetu obstaja velika razprava o tem, ali je zlaganje ali zvijanje bolj učinkovito. Sem zložljiva oseba.
Kakor koli že, da boste lahko postavili večino predmetov, majice postavite eno ob drugo. Točno to zaslon: vrstni blok je namenjen za. Ti elementi lahko sedijo drug poleg drugega na isti črti, pa tudi zraven zaslon: v vrstici elementi.
Za razliko zaslon: v vrstici elementi, an vrstica-blok element se premakne v naslednjo vrstico, če ne ustreza vsebini div poleg drugega vrstica-blok elementi. Da bi se majica razlila v naslednjo vrstico, jo morate prerezati na polovico, preostalo polovico pa uporabiti za začetek nove vrstice. Vrstni blok elementi se ne smejo deliti na polovico, če ne ustrezajo črti.
Nogavice, ki zapolnjujejo vrzeli
Preverite izvorni HTML in opazili boste, da je ena nogavica div> med osmimi majicami. A oglejte si vodoravni pogled kovčka na desni. Če je ena nogavica div>, kako se lahko konča srednja vrstica in začne spodnja vrstica? To je namen zaslon: v vrstici!
An v vrsti element se bo prelil v naslednjo vrstico, če presega širino div (na ta način se razlikuje od vrstica-blok ali blok). Od naših nogavic div je poln nogavic, ki so naključno natlačene v vrzeli, lahko zlahka začne zapolniti vrzel na desni strani srednje vrstice in se prelije, da začne spodnjo vrsto.
Nobene nogavice ne bo treba rezati na polovico, da se bo to zgodilo. Zato lahko to postanejo v vrsti, medtem ko so majice lahko samo vrstica-blok. Če so majice v srednji vrsti zajemale le 60 odstotkov širine, so bile nogavice div> bi se premaknil navzgor, da bi zapolnil ves prostor v preostali vrstici.
Srečno pot
To je zadnji CSS za naš kovček:
.delicate {display: block; širina: 60%; } .tshirt {zaslon: inline-block; širina: 20%; } .nogavice {display: inline; }
Tu je nekaj nadomestnih scenarijev za ponazoritev različnih načinov uporabe zaslona. Če bi imeli občutki na vrhu zaslon: vrstni blok, bi se prilegali tik ob majicah. Nekatere majice bi se premaknile do zgornje vrstice, ostale pa bi se temu ustrezno prilagodile. Na levi in desni majici z ovratnikom ne bi bilo udobnega blažilnika.
Če bi imela vsaka majica zaslon-blok, imeli bi ogromen kup majic drug na drugega, po eno na vrstico. Če bi nogavice imele zaslon: vrstni blok, vsi bi sedeli v spodnji vrstici in ne tekali med obema vrstama. Nekatere majice bi potisnili v drugo vrsto in tvorili četrto vrstico. Na desni strani srednje vrste majic bi nastala vrzel.
Z metodo, ki sem jo tukaj opisal, dobimo lepo zapakiran kovček, ki najbolje izkoristi razpoložljivi prostor.
Ta članek je bil prvotno objavljen v net magazine številka 289; kupi tukaj!
