Indhold
Det er midnat, og den ene div på dit websted ligner stadig et barns legetøjskiste. Alle elementerne er et rodet rod, og hver gang du spiller med CSS'er Skærm ejendom, omarrangerer de sig til en helt anden slags vrøvl.
Hvis du er som mig, vil du sandsynligvis løse dette ved at mumle under din ånde og blive konsekvent mere aggressiv med dit tastatur. Og selvom denne strategi har fungeret for mig før, satte jeg mig for nylig for at finde en bedre måde at forstå Skærm ejendom.
Det viser sig det grundlæggende i Skærm er meget enklere end jeg oprindeligt troede. Faktisk bruger de de samme principper som at pakke en kuffert. Jeg skal dække display: blok, inline-blok og inline. Hvis du har arrangeret en kuffert på en ordnet måde før, vil du se parallel. Hvis du er den slags person, der rammer alt dit tøj på en tilfældig måde - ja, der er kun så meget, jeg kan gøre for dig.
Vores kuffert vil indeholde tre typer tøj:
- Finvask, som en kraveformet skjorte
- T-shirts, der kan rulles op
- Sokker eller undertøj, der kan fyldes i huller
Til reference, hvis vi modellerede kufferten i HTML, ville den se sådan ud:
div class = 'suitcase'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'sokker'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
De sarte ting på toppen
Display: blok er standard for de fleste HTML-elementer. Det betyder, at elementet optager hele det vandrette rum i sin container div. Hvis det er ved siden af andre søskendeelementer, starter det en ny linje og tillader ikke andre elementer på sin linje. Det svarer til de sarte ting, du lægger øverst i kufferten. Dette er sarte eller smarte genstande, såsom krave-skjorter. Du vil ikke have dem til at blive krøllede, så du skal sørge for at de ikke skubbes op mod andre tøjstykker.
Dette bringer en af de hårdeste dele af display: blok. Læg mærke til, at den kraveformede skjorte ikke optager hele kuffertens bredde? Det betyder ikke, at andre ting hopper op til niveauet. Lad os sige, at denne skjorte er 60 procent af kuffertens bredde; det ville stadig blokere for andre elementer fra at slutte sig til det på øverste niveau.
Derfor er der en orange kant på billedet. EN display: blok element tilføjer automatisk en margen omkring det, hvis det ikke optager hele det vandrette rum.
Pænt pakket T-shirts
Det meste af din kuffert er sandsynligvis fuld af resten af dit tøj til din rejse. For enkelheds skyld vil vi skære dette ned til bare T-shirts. Der er en stor debat på Internettet om, hvorvidt foldning eller rulning er mere effektiv. Jeg er en sammenfoldelig person.
Under alle omstændigheder stiller du dine T-shirts side om side for at passe til de fleste varer. Dette er præcis hvad display: inline-blok er beregnet til. Disse elementer kan sidde ved siden af hinanden på samme linje såvel som ved siden af display: inline elementer.
I modsætning til display: inline elementer, en inline-blok element flytter til næste linje, hvis det ikke passer ind i dets indeholdende div sammen med den anden inline-blok elementer. For at få en T-shirt til at løbe ud i næste række, skal du skære den i halve og bruge den resterende halvdel til at starte en ny række. Inline-blok elementer har ikke lov til at opdele i halvdelen, hvis de ikke passer på en linje.
Sokkerne, der udfylder hullerne
Gå tilbage til den oprindelige HTML, og du vil bemærke, at der er én sokker div> mellem de otte T-shirts. Men kig på den vandrette visning af kufferten til højre. Hvis der er én sokker div>, hvordan kan det slutte den midterste række og begynde den nederste række? Dette er formålet med display: inline!
En inline element spreder over til næste linje, hvis det overstiger bredden på div (på denne måde er det forskelligt fra inline-blok eller blok). Siden vores sokker div er fuld af sokker, der er tilfældigt fyldt i huller, det kan let begynde at udfylde hullet på højre side af den midterste række og smitte over for at begynde den nederste række.
Ingen strømper skal skæres i to for at dette kan ske. Det er derfor, de kan blive inline, mens T-shirts kun kan være inline-blok. Hvis T-shirtsne på den midterste række kun tog 60 procent af bredden, sokkerne div> ville bevæge sig op for at udfylde hele mellemrummet på resten af rækken.
God rejse
Dette er den sidste CSS for vores kuffert:
.delicate {display: block; bredde: 60%; } .tshirt {display: inline-block; bredde: 20%; } .socks {display: inline; }
Her er et par alternative scenarier for at illustrere de forskellige anvendelser af displayet. Hvis delikatesser på toppen havde display: inline-blok, de passer ind lige ved siden af T-shirtsne. Nogle af T-shirtsne flyttede op til den øverste linje, og resten ville justere sig i overensstemmelse hermed. Der ville ikke være nogen behagelig buffer til venstre og højre for krave.
Hvis hver T-shirt havde display-blok, ville du have en massiv stak T-shirts oven på hinanden, en pr. linje. Hvis sokkerne havde display: inline-blok, ville de alle sidde på den nederste række i stedet for at flyde mellem de to rækker. Nogle T-shirts ville blive skubbet på en anden række og danne en fjerde linje. Der ville være et hul til højre for den midterste række af T-shirts.
Med den metode, jeg har skitseret her, ender vi med en pænt pakket kuffert, der udnytter den ledige plads bedst.
Denne artikel opstod oprindeligt i netmagasin udgave 289; køb det her!
