Turinys
- Subtilūs daiktai viršuje
- Tvarkingai supakuoti marškinėliai
- Kojinės, užpildančios spragas
- Geros kelionės
Tai vidurnaktis, ir tas div jūsų svetainėje vis dar atrodo kaip vaiko žaislų skrynia. Visi elementai yra sumaišytas sumaištis ir kiekvieną kartą, kai žaidi su CSS ekranas nuosavybę, jie pertvarko save į visai kitokią nesąmonę.
Jei esate panašus į mane, tikriausiai tai išspręsite murmėdamas po nosimi ir nuolat tapsite agresyvesnis su klaviatūra. Ir nors ši strategija man buvo naudinga anksčiau, neseniai ėmiausi ieškoti geresnio būdo suprasti ekranas nuosavybė.
Pasirodo, pagrindai ekranas yra daug paprastesni, nei manyčiau iš pradžių. Tiesą sakant, jie vadovaujasi tais pačiais principais kaip ir lagaminų pakavimas. Ketinu aprėpti rodyti: blokuoti, inline-block ir tiesiai. Jei anksčiau sutvarkėte lagaminą tvarkingai, pamatysite paralelę. Jei esate tas žmogus, kuris visus drabužius taranuoja atsitiktinai - gerai, aš galiu padaryti tik tiek daug jums.
Mūsų lagamine bus trijų tipų drabužiai:
- Subtilus, kaip antkakliai marškiniai
- Marškinėliai, kuriuos galima susukti
- Kojinės ar apatinis trikotažas, kuriuos galima įkišti į tarpus
Jei lagaminą sumodeliuotume HTML, tai atrodytų taip:
div class = 'lagaminas'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'marškinėliai'> / div> div class = 'kojinės'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = „marškinėliai“> / div> / div>
Subtilūs daiktai viršuje
Ekranas: blokuoti yra numatytasis parametras daugeliui HTML elementų. Tai reiškia, kad elementas užima visą horizontalią erdvę savo konteineryje div. Jei jis yra šalia kitų brolių ar seserų elementų, jis pradės naują eilutę ir neleis kitų elementų savo eilutėje. Jis panašus į subtilius daiktus, kuriuos dedate lagamino viršuje. Tai subtilūs ar protingi straipsniai, pavyzdžiui, marškiniai su apykakle. Nenorite, kad jie susiraukšlėtų, todėl įsitikinkite, kad jie nėra prikišti prie kitų drabužių.
Tai iškelia vieną iš sunkiausių rodyti: blokuoti. Atkreipkite dėmesį, kaip apykaklės marškinėliai neužima viso lagamino pločio? Tai nereiškia, kad kiti elementai šoktels į savo lygį. Tarkime, kad šie marškiniai yra 60 procentų lagamino pločio; tai vis tiek trukdytų kitiems elementams prisijungti prie jo aukščiausiu lygiu.
Štai kodėl paveikslėlyje yra oranžinė siena. A rodyti: blokuoti elementas automatiškai pridės paraštę aplink jį, jei jis neužims visos horizontalios erdvės.
Tvarkingai supakuoti marškinėliai
Tikriausiai didžioji jūsų lagamino dalis yra likusių jūsų kelionės drabužių. Siekdami paprastumo, mes ketiname tai sumažinti tik marškinėliais. Internete vyksta didžiulės diskusijos, ar lankstymas, ar valcavimas yra efektyvesnis. Aš esu sulankstomas žmogus.
Bet kokiu atveju, norėdami sutalpinti daugumą daiktų, marškinėlius sustatykite greta. Tai yra būtent tai ekranas: inline-block yra skirta. Šie elementai gali sėdėti vienas šalia kito toje pačioje linijoje, taip pat šalia ekranas: įterptas elementai.
Skirtingai ekranas: įterptas elementai, an inline-block elementas bus perkeltas į kitą eilutę, jei netelpa į jo sudėtį div greta kito inline-block elementai. Norint, kad marškinėliai išsilietų ant kitos eilės, turėtumėte juos perpjauti per pusę ir likusią pusę panaudoti pradėdami naują eilę. Įterptinis blokavimas elementams neleidžiama dalytis per pusę, jei jie netelpa tiesėje.
Kojinės, užpildančios spragas
Grįžkite į pradinį HTML ir pastebėsite, kad yra viena kojinė div> tarp aštuonių marškinėlių. Bet pažvelkite į horizontalų lagamino vaizdą dešinėje. Jei yra viena kojinė div>, kaip tai gali baigti vidurinę eilę ir pradėti apatinę eilę? Tai yra tikslas ekranas: įterptas!
An tiesiai elementas persikels į kitą eilutę, jei jis viršys div (tokiu būdu jis skiriasi nuo inline-block arba blokuoti). Nuo mūsų kojinių div yra pilna kojinių, kurios yra atsitiktinai įkištos į tarpus, ji gali lengvai pradėti užpildyti vidurio eilės dešinėje pusėje esančią spragą ir išsilieti, kad būtų pradėta apatinė eilutė.
Kad taip nutiktų, kojinių perkirpti nereikės. Štai kodėl jie gali tapti tiesiai, o marškinėliai gali būti tik inline-block. Jei vidutinės eilės marškinėliai užėmė tik 60 procentų pločio, kojinės div> judėtų aukštyn, kad užpildytų visą likusios eilės vietą.
Geros kelionės
Tai yra paskutinė mūsų lagamino CSS:
.delicate {display: block; plotis: 60%; } .tshirt {display: inline-block; plotis: 20%; } .kojinės {display: inline; }
Čia pateikiami keli alternatyvūs scenarijai, iliustruojantys skirtingus ekrano naudojimo būdus. Jei delikatesai viršuje turėjo ekranas: inline-block, jie tilptų tiesiai prie marškinėlių. Kai kurie marškinėliai pakiltų į viršutinę liniją, o kiti - atitinkamai. Apykaklės marškinių kairėje ir dešinėje nebūtų patogaus buferio.
Jei kiekvienas marškinėlis turėjo rodyti-blokuoti, jūs turėtumėte didžiulį marškinėlių šūsnį vienas ant kito, po vieną eilutę. Jei kojinės būtų ekranas: inline-block, jie visi sėdėjo apatinėje eilėje, o ne tekėjo tarp dviejų eilučių. Kai kurie marškinėliai būtų stumiami ant kitos eilės, formuojant ketvirtą eilutę. Vidurinės marškinėlių eilės dešinėje būtų tarpas.
Taikydami čia aprašytą metodą, mes gauname tvarkingai supakuotą lagaminą, kuris geriausiai išnaudoja turimą erdvę.
Šis straipsnis iš pradžių pasirodė tinklinis žurnalas 289 leidimas; nusipirk čia!
