Përmbajtje
Midshtë mesnatë, dhe ajo div në faqen tuaj ende duket si gjoksi i lodrave të një fëmije. Të gjithë elementët janë një rrëmujë e ngatërruar dhe çdo herë që luani me CSS shfaqje pronën, ata riorganizohen në një pakuptimësi krejtësisht të ndryshme.
Nëse jeni si unë, ndoshta do ta zgjidhni këtë duke mërmëritur nën buzë dhe duke u bërë vazhdimisht më agresiv me tastierën tuaj. Dhe megjithëse kjo strategji ka funksionuar për mua më parë, unë kohët e fundit u vendosa të gjej një mënyrë më të mirë për të kuptuar atë shfaqje pronë.
Rezulton bazat e shfaqje janë shumë më të thjeshtë sesa mendoja fillimisht. Në fakt, ata përdorin të njëjtat parime si paketimi i një valixheje. Unë do të mbuloj ekran: bllok, inline-bllok dhe ne rresht. Nëse e keni rregulluar një valixhe në një mënyrë të rregullt më parë, do të shihni paralelen. Nëse jeni lloji i personit që i bëni të gjitha rrobat tuaja në një mënyrë të rastësishme - mirë, ka vetëm kaq shumë që mund të bëj për ju.
Valixhja jonë do të përmbajë tre lloje veshjesh:
- Delikate, si një këmishë me jakë
- Bluza që mund të mbështillen
- Çorape ose mbathje që mund të mbushen në boshllëqe
Për referencë, nëse do ta modelonim valixhen në HTML, do të dukej kështu:
div class = 'valixhe'> div class = 'delikate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div klas = 'tshirt'> / div> div class = 'çorape'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div klas = 'tshirt'> / div> / div>
Sendet delikate sipër
Ekran: bllok është e paracaktuar për shumicën e elementeve HTML. Kjo do të thotë se elementi zë të gjithë hapësirën horizontale brenda kontejnerit të tij div. Nëse është pranë elementëve të tjerë vëllezër, do të fillojë një linjë të re dhe nuk lejon elementë të tjerë në linjën e saj. Isshtë e ngjashme me sendet delikate që vendosni në majë të valixhes tuaj. Këto janë artikuj delikatë ose të zgjuar siç janë këmisha me jakë. Ju nuk doni që ata të rrudhen, kështu që sigurohuni që ato të mos shtyhen kundër pjesëve të tjera të veshjeve.
Kjo sjell një nga pjesët më të vështira të ekran: bllok. Vini re se si këmisha me jakë nuk zë të gjithë gjerësinë e valixhes? Kjo nuk do të thotë që artikujt e tjerë do të rriten në nivelin e tij. Le të themi që kjo këmishë është 60 për qind e gjerësisë së valixhes; ai ende do të bllokonte elementët e tjerë që të bashkohen me të në nivelin e lartë.
Kjo është arsyeja pse ekziston një kufi portokalli në foto. A ekran: bllok elementi automatikisht do të shtojë një diferencë rreth tij nëse nuk zë të gjithë hapësirën horizontale.
Bluza të mbushura mjeshtërisht
Pjesa më e madhe e valixheve tuaj është ndoshta e mbushur me pjesën tjetër të veshjeve tuaja për udhëtimin tuaj. Për hir të thjeshtësisë, ne do ta shkurtojmë këtë vetëm në bluza. Ekziston një debat i madh në internet nëse palosja ose rrotullimi është më efikase. Unë jam një lloj personi që paloset.
Gjithsesi, në mënyrë që të përshtateni më së shumti artikuj, ju rreshtoni bluzat tuaja krah për krah. Kjo është pikërisht ajo shfaqja: bllok-inline është menduar për të. Këta elementë mund të ulen pranë njëri-tjetrit në të njëjtën linjë, si dhe pranë shfaqje: inline elementet.
Ndryshe nga shfaqje: inline elemente, një inline-bllok elementi do të zhvendoset në rreshtin tjetër nëse nuk përshtatet në përmbajtjen e tij div krahas tjetrit inline-bllok elementet. Në mënyrë që të keni një derdhje të bluzave në rreshtin tjetër, do të duhet ta prisni atë në gjysmë dhe të përdorni gjysmën e mbetur për të filluar një rresht të ri. Inline-bllok elementet nuk lejohen të ndahen në gjysmë nëse nuk përshtaten në një vijë.
Çorapet që mbushin boshllëqet
Kthehuni në HTML origjinal dhe do të vini re se ka një çorape div> midis tetë bluzave. Por hidhni një vështrim në pamjen horizontale të valixhes në të djathtë. Nëse ka një çorape div>, si mund ta përfundojë rreshtin e mesëm dhe të fillojë rreshtin e poshtëm? Ky është qëllimi i shfaqje: inline!
Një ne rresht elementi do të derdhet në vijën tjetër nëse e tejkalon gjerësinë e div (në këtë mënyrë është ndryshe nga inline-bllok ose bllokoj) Që nga çorapet tona div është plot me çorape që janë mbushur rastësisht në boshllëqe, ajo lehtë mund të fillojë të mbushë boshllëkun në anën e djathtë të rreshtit të mesëm dhe të derdhet për të filluar rreshtin e poshtëm.
Asnjë çorape nuk do të duhet të pritet në gjysmë që të ndodhë kjo. Kjo është arsyeja pse ata mund të bëhen ne rresht, ndërsa bluzat mund të jenë vetëm inline-bllok. Nëse bluzat në rreshtin e mesëm zinin vetëm 60 për qind të gjerësisë, çorapet div> do të lëvizte lart për të mbushur të gjithë hapësirën në pjesën tjetër të rreshtit.
Udhëtim i mirë
Kjo është CSS përfundimtare për valixhen tonë:
.delicate {shfaqja: bllok; gjerësia: 60%; } .tshirt {display: inline-block; gjerësia: 20%; } .socks {display: inline; }
Këtu janë disa skenarë alternative për të ilustruar përdorimet e ndryshme të shfaqjes. Nëse delikatesat në krye kishin shfaqja: bllok-inline, ata do të përshtateshin në krah të bluzave. Disa nga bluzat do të lëviznin lart në vijën e sipërme, dhe pjesa tjetër do të rregullohej në përputhje me rrethanat. Nuk do të kishte asnjë tampon komod në të majtë dhe të djathtë të këmishës me jakë.
Nëse secila bluzë do të kishte ekran-bllok, do të kishit një pirg masiv bluzash njëra mbi tjetrën, një për çdo rresht. Nëse çorapet do të kishin shfaqja: bllok-inline, ata të gjithë do të uleshin në rreshtin e poshtëm në vend që të derdheshin midis dy rreshtave. Disa bluza do të shtyheshin në një rresht tjetër, duke formuar një vijë të katërt. Do të kishte një boshllëk në të djathtë të rreshtit të mesit të bluzave.
Me metodën që kam përshkruar këtu, ne përfundojmë me një valixhe të paketuar mjeshtërisht që përdor më së miri hapësirën në dispozicion.
Ky artikull fillimisht u shfaq në revistë neto numri 289; blej këtu!
