A CSS megjelenítési tulajdonságának megértése

Éjfél van, és az az egy div webhelyén még mindig úgy néz ki, mint egy gyermek játék ládája. Minden elem zűrzavaros, és valahányszor játszik CSS 's kijelző vagyontárgyak, teljesen más hülyeségekké rendezik át magukat.

Ha olyan vagy, mint én, akkor valószínűleg megoldod ezt azzal, hogy az orrod alatt motyogsz, és következetesen agresszívebb leszel a billentyűzettel. És bár ez a stratégia már korábban is működött nálam, nemrégiben arra vállalkoztam, hogy jobb módot találjak a kijelző ingatlan.

Kiderül az alapjai kijelző sokkal egyszerűbbek, mint eredetileg gondoltam. Valójában ugyanazokat az elveket alkalmazzák, mint a bőrönd csomagolása. Letakarok kijelző: blokk , inline-block és Sorban . Ha korábban rendezett bőröndöt rendezett, látni fogja a párhuzamot. Ha az a fajta ember vagy, aki az összes ruhadarabot véletlenszerűen megdörzsöli - nos, csak annyit tehetek érted.



Bőröndünk háromféle ruházatot tartalmaz:

  • Finom, mint egy galléros ing
  • Tekerhető pólók
  • Hézagokba tömhető zokni vagy fehérnemű

Például, ha HTML-ben modelleztük a bőröndöt, a következőképpen néz ki:

A finom elemek a tetején

A galléros ing egy halom ruhára ül alatta. Ez az egyetlen elem, amely a saját rétegét foglalja el

A galléros ing egy halom ruhára ül alatta. Ez az egyetlen elem, amely a saját rétegét foglalja el

Kijelző: blokk az alapértelmezett a legtöbb HTML elemnél. Ez azt jelenti, hogy az elem a tartályában lévő teljes vízszintes helyet elfoglalja div . Ha más testvér elemek mellett van, akkor új sort indít, és nem enged más vonalakat. Hasonló a kényes tárgyakhoz, amelyeket a bőröndje tetejére tett. Finom vagy okos cikkek ezek, például galléros ingek. Nem akarja, hogy ráncosodjanak, ezért ügyeljen arra, hogy ne nyomódjanak más ruhadarabokhoz.

Ez hozza fel az egyik legnehezebb részt kijelző: blokk . Figyelje meg, hogy a galléros ing nem foglalja-e el a bőrönd teljes szélességét? Ez nem azt jelenti, hogy más elemek a szintjére ugranak. Tegyük fel, hogy ez az ing a bőrönd szélességének 60 százaléka; akkor is megakadályozná, hogy más elemek csatlakozzanak a legfelsõbb szinthez.

Ezért van a képen narancssárga szegély. A kijelző: blokk Az elem automatikusan margót ad hozzá, ha nem foglalja el a teljes vízszintes helyet.

Szépen csomagolt pólók

Itt láthatjuk a pólók felső és alsó sorát, mindegyikben négy inget

Itt láthatjuk a pólók felső és alsó sorát, mindegyikben négy inget

A bőröndjének nagy része valószínűleg tele van az utazás többi ruházatával. Az egyszerűség kedvéért ezt csak pólókra vágjuk. Az interneten nagy vita folyik arról, hogy a hajtogatás vagy a hengerlés hatékonyabb-e. Összecsukható ember vagyok.

Egyébként annak érdekében, hogy a legtöbb cikk elférjen, egymás mellé állítja a pólóit. Pontosan ez az display: inline-block célja. Ezek az elemek egymás mellett ülhetnek ugyanazon a vonalon, valamint mellett kijelző: sorban elemek.

nem úgy mint kijelző: sorban elemek, an inline-block az elem a következő sorra lép, ha nem fér bele a tartalmába div a másik mellett inline-block elemek. Annak érdekében, hogy a póló a következő sorra ömljön, felére kell vágnia, és a fennmaradó felét új sor indításához kell felhasználnia. Inline-block az elemeket nem szabad kettéosztani, ha nem illeszkednek egy vonalra.

A hézagokat kitöltő zoknik

A zokni inline elem, ami azt jelenti, hogy kitöltik a réseket a pólók körül

A zokni inline elem, ami azt jelenti, hogy kitöltik a réseket a pólók körül

Térjen vissza az eredeti HTML-re, és megjegyzi, hogy van egy zokni a nyolc póló között. Vessen egy pillantást a jobb oldali bőrönd vízszintes nézetére. Ha van egy zokni , hogyan fejezheti be a középső sort és kezdheti az alsó sort? Ez a célja kijelző: sorban !

An Sorban elem átkerül a következő sorra, ha túllépi a div (ily módon különbözik a inline-block vagy Blokk ). A zoknink óta div tele van zoknikkal, amelyek véletlenszerűen résekbe vannak töltve, könnyen elkezdheti kitölteni a rést a középső sor jobb oldalán, és átfolyhat az alsó sor megkezdéséhez.

Nem kell zoknit félbevágni, hogy ez megtörténjen. Ezért válhatnak Sorban , míg a pólók csak inline-block . Ha a középső sor pólói csak a szélesség 60 százalékát tették ki, akkor a zoknit felfelé haladna, hogy kitöltse a sor többi részén található teljes helyet.

jó utat

Ez a bőröndünk utolsó CSS-je:

.delicate { display:block; width:60%; } .tshirt{ display:inline-block; width:20%; } .socks{ display:inline; }

Íme néhány alternatív forgatókönyv a megjelenítés különböző felhasználásának szemléltetésére. Ha a tetején lévő finomságok megvoltak display: inline-block , illeszkednének közvetlenül a pólók mellé. Néhány póló feljebb lépne a felső sorba, a többi pedig ennek megfelelően beállítaná. A galléros ingtől jobbra és balra nem lenne kényelmes ütköző.

Ha minden pólónak megvolt volna display-block , masszív pólód lenne egymás tetején, soronként egy. Ha a zokni volna display: inline-block , mindannyian az alsó sorban ülnének, nem pedig a két sor között áramlanak. Néhány pólót egy másik sorra tolnának, ezzel egy negyedik vonalat alkotva. A pólók középső sorának jobb oldalán egy rés lenne.

Az itt vázolt módszerrel egy szépen csomagolt bőrönddel rendelkezünk, amely a lehető legjobban kihasználja a rendelkezésre álló helyet.

Ez a cikk eredetileg itt jelent meg net magazin 289. szám; vásárolja meg itt !

Kapcsolódó cikkek: