Obsah
Je polnoc a tá div na vašom webe stále vyzerá ako detská truhlica s hračkami. Všetky prvky sú neporiadkom a vždy, keď hráte s CSS displej majetku, prestavujú sa do úplne iného kúska nezmyslov.
Ak ste ako ja, pravdepodobne to vyriešite tak, že si zamrmlate pod nosom a budete neustále agresívnejší s klávesnicou. A hoci táto stratégia u mňa už predtým fungovala, nedávno som sa vydal hľadať lepší spôsob porozumenia displej nehnuteľnosť.
Ukazuje sa to základ displej sú oveľa jednoduchšie, ako som si pôvodne myslel. V skutočnosti používajú rovnaké princípy ako balenie kufra. Idem kryť displej: blok, vložený blok a v rade. Ak ste si predtým usporiadali kufor usporiadane, uvidíte rovnobežku. Ak ste ten typ človeka, ktorý vrhá všetko vaše oblečenie nahodilým spôsobom - no, môžem pre vás urobiť len toľko.
Náš kufor bude obsahovať tri druhy oblečenia:
- Jemné, ako košeľa s golierom
- Tričká, ktoré sa dajú vyhrnúť
- Ponožky alebo spodná bielizeň, ktoré môžu byť plnené do medzier
Pre porovnanie, ak by sme kufrík vymodelovali v HTML, vyzeralo by to takto:
div class = 'kufr'> div class = 'delikátny'> / div> div class = 'tričko'> / div> div class = 'tričko'> / div> div class = 'tričko'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tričko'> / div> / div>
Jemné predmety navrchu
Displej: blok je predvolený pre väčšinu prvkov HTML. To znamená, že prvok zaberá celý horizontálny priestor vo svojej nádobe div. Ak je vedľa ďalších súrodeneckých prvkov, začne nový riadok a nepovolí ďalšie prvky na svojom riadku. Je to podobné ako s jemnými predmetmi, ktoré ste vložili do hornej časti kufra. Jedná sa o jemné alebo inteligentné výrobky, ako sú košele s golierom. Nechcete, aby sa pokrčili, takže sa uistite, že nie sú tlačené proti iným kúskom oblečenia.
Toto prináša jednu z najťažších častí aplikácie displej: blok. Všimnite si, ako košeľa s golierom nezaberá celú šírku kufra? To neznamená, že ostatné položky vyskočia na svoju úroveň. Povedzme, že táto košeľa je 60 percent šírky kufra; stále by to zablokovalo pripojenie ďalších prvkov na najvyššej úrovni.
Preto je na obrázku oranžový okraj. A displej: blok element automaticky pridá okolo seba okraj, ak nezaberá celý vodorovný priestor.
Úhľadne zabalené tričká
Väčšina vášho kufra je pravdepodobne plná zvyšku oblečenia na cestu. Kvôli jednoduchosti to skrátime iba na tričká. Na internete sa vedie veľká debata o tom, či je skladanie alebo valcovanie efektívnejšie. Som skladací druh človeka.
Aby ste sa do nich zmestili najviac, každopádne si tričká zoradíte vedľa seba. To je presne to, čo displej: vložený blok je určený pre. Tieto prvky môžu sedieť vedľa seba na rovnakej línii, aj vedľa seba zobrazenie: vložené prvkov.
Na rozdiel od zobrazenie: vložené prvky, an vložený blok element sa presunie na ďalší riadok, ak sa nezmestí do jeho obsahujúceho div popri druhom vložený blok prvkov. Aby sa tričko rozlialo na ďalší riadok, budete ho musieť rozrezať na polovicu a pomocou zvyšnej polovice založiť nový riadok. Vložený blok prvky sa nesmú deliť na polovice, ak sa nezmestia na čiaru.
Ponožky, ktoré vypĺňajú medzery
Vráťte sa k pôvodnému kódu HTML a všimnite si, že sú tu aj jedny ponožky div> medzi ôsmimi tričkami. Ale pozrite sa na vodorovný pohľad na kufor vpravo. Ak je tam jedna ponožka div>, ako môže ukončiť stredný riadok a začať spodný riadok? To je účelom zobrazenie: vložené!
An v rade prvok sa rozleje na ďalší riadok, ak presahuje šírku súboru div (týmto spôsobom sa líši od vložený blok alebo blokovať). Od našich ponožiek div je plná ponožiek, ktoré sú náhodne plnené medzerami, môže ľahko začať vyplňovať medzeru na pravej strane stredného radu a rozliať sa tak, aby začal dolný rad.
Aby sa tak stalo, nebude treba rozrezávať žiadne ponožky na polovicu. To je dôvod, prečo sa môžu stať v rade, zatiaľ čo tričká môžu byť iba vložený blok. Ak tričká v strednom rade zaberali iba 60 percent šírky, ponožky div> by sa posunul nahor a vyplnil celý priestor na zvyšku radu.
Dobrú cestu
Toto je posledný CSS pre náš kufor:
.delicate {display: block; šírka: 60%; }. tričko {display: inline-block; šírka: 20%; } .ponuky {display: inline; }
Tu uvádzame niekoľko alternatívnych scenárov, ktoré ilustrujú rôzne spôsoby použitia displeja. Keby mali jemné na vrchu displej: vložený blok, zmestili by sa rovno k tričkám. Niektoré tričká by sa posunuli hore k hornej čiare a zvyšok by sa tomu zodpovedajúcim spôsobom prispôsobil. Naľavo a napravo od golierovej košele by nebol pohodlný nárazník.
Keby každé tričko malo blok displeja, mali by ste na sebe masívny stoh tričiek, jedno na každú linku. Keby mali ponožky displej: vložený blok, všetci by sedeli skôr v spodnom rade, než aby pretekali medzi dvoma radmi. Niektoré tričká by sa natlačili na iný rad, ktorý by tvoril štvrtý rad. Napravo od stredného radu tričiek by mala byť medzera.
Pri metóde, ktorú som tu načrtol, skončíme s úhľadne zabaleným kufrom, ktorý najlepšie využije dostupný priestor.
Tento článok sa pôvodne objavil v sieťový časopis vydanie 289; kúpite to tu!
