Šiame vadove parodysiu, kaip naudoti "Chrome" programuotojo įrankius , kad pritaikytumėte ir išspręstumėte dažniausiai pasitaikančias svetainių išdėstymo ir perpildymo problemas. Naudodamiesi paprastu pavyzdžiu, sudarytu iš HTML ir CSS , sužinosite, kaip teisingai nustatyti elementų aukštį ir panaikinti nereikalingas slinkties juostas. Programuotojo įrankių įrankiai leidžia dirbti tiesiogiai naršyklėje ir iš karto atlikti pakeitimus. Pradėkime iš karto!
Pagrindinės išvados
- Flexbox padeda efektyviai kurti maketus.
- Elementų aukštis turi būti nustatytas teisingai, kad būtų išvengta perpildymo problemų.
- Margin ir padding gali sukelti nepageidaujamas slinkties juostas, kurias galima ištaisyti atliekant paprastus pakeitimus.
Žingsnis po žingsnio vadovas
Patikrinkite išdėstymą ir atlikite koregavimus
Pradėkite nuo svetainės atidarymo "Chrome" ir paleiskite programuotojo įrankius. Tai galite padaryti spustelėję puslapį dešiniuoju pelės klavišu ir pasirinkę "Explore" arba tiesiog paspaudę F12. Tada eikite į skirtuką "Elementai", kad pamatytumėte HTML kodo struktūrą.
Pirmiausia pažvelkite į pagrindinį divą, kuriame yra "flexbox" išdėstymas. Šioje srityje galite nustatyti flexbox konfigūraciją. Patikrinkite, ar teisingai pritaikytas display: flex; ir ar likusiam divui, kuris naudoja flex 1, išdėstyme užtenka vietos.
Čia matote, kad poilsio div yra tik 18,5 pikselio aukščio, o tai yra gerokai per mažai norimos vietos. Šį aukštį reikėtų atitinkamai pakoreguoti, kad būtų išnaudota visa turima erdvė.
Sureguliuokite patronuojančių elementų aukštį
Norėdami užtikrinti, kad jūsų poilsio divas užimtų visą puslapio aukštį, turite nustatyti 100 % tėvinių elementų, įskaitant body ir html, aukštį. Grįžkite į stilius ir nustatykite kūno aukštį 100 %.
Pamatysite, kad kol kas niekas nepasikeitė. Taip pat reikia patikrinti, ar html žyma taip pat nustatyta į 100 % aukštį. Tai svarbi sąlyga, kad viskas veiktų.
Kai tik nustatysite html žymės aukštį 100 %, dabar maketas turėtų būti rodomas teisingai. Dabar poilsio divas užpildys visą puslapio erdvę.
Patikslinkite flexbox nustatymus
Kitas žingsnis - patikslinti flexbox nustatymus. Galite koreguoti fleksobokso konteinerio antrinių elementų lygiuotę išbandydami tokias parinktis kaip align-items arba justify-content. Šie nustatymai padeda valdyti turinio pozicijas konteineryje.
Eksperimentuodami įsitikinkite, kad stebite vizualinį vaizdą. Kartokite nustatymus, kol būsite patenkinti turinio išdėstymu.
Nustatykite ir ištaisykite perpildymo problemas
Dabar susidursite su dar viena problema, t. y. perpildymu, dėl kurio atsiranda nepageidaujamos slinkties juostos. Norėdami išsiaiškinti, kurie elementai yra atsakingi už slinkties juostą, dešiniuoju pelės klavišu spustelėkite slinkties juostą ir pasirinkite "Inspect" (tikrinti).
Inspect srityje pamatysite, kad elemento body marža yra 8 pikseliai. Ši paraštė gali būti atsakinga už tai, kad jūsų puslapio plotis viršija 100 %, todėl atsiranda perpildymas.
Norėdami išspręsti šią problemą, nustatykite kūno maržą į 0 ir nepamirškite, kad, norėdami sukurti nuoseklumą, paprastai atliekate CSS atstatymą. Tai reiškia, kad visos paraštės nustatomos į nulį, prieš vėl pridėdami savo paraštes.
Sureguliuokite pagalvėlę ir langelio dydį
Išsprendę maržos problemą, taip pat turite patikrinti užpildą. Gali būti, kad html žymėje taip pat yra užpildas, kuris prisideda prie perpildymo. Čia galite nustatyti, kad padding būtų 0, arba nustatyti dėžutės dydį į "border-box". Tai reiškia, kad į pagalvėlę bus atsižvelgta apibrėžto pločio ribose ir slinkties juosta išnyks.
Įdiegę visa tai, dabar turėtumėte turėti išdėstymo struktūrą be slinkties juostų, kuri optimaliai prisitaiko prie turimos ekrano erdvės.
Apibendrinimas
Šiame vadove sužinojote, kaip naudoti "Chrome" programuotojo įrankius, kad nustatytumėte ir ištaisytumėte svetainės išdėstymo problemas ir perpildymo klaidas. Supratote, kaip svarbu naudoti "flexbox" ir teisingus aukščio bei maržos nustatymus, kad sukurtumėte estetišką išdėstymą.
Dažniausiai užduodami klausimai
Kaip "Chrome" programuotojo įrankiuose galiu pakeisti HTML elementų dydį?HTML elemento aukštį ir plotį galite reguliuoti stiliuose ir įvesti norimą reikšmę.
Ką daryti, jei mano išdėstymas neveikia taip, kaip tikėtasi? Naudodamiesi inspectiv funkcijomis sužinokite, ar turi įtakos erdvei tėvinių elementų maržos arba užpildymas.
Kaip nustatyti nulinę maržą? stiliuose prie norimo elemento pridėkite margin: 0;.
Kuo skiriasi padding ir margin?padding - tai vidinis elemento tarpas, o margin - išorinis tarpas.
Kaip pereiti prie lankstaus išdėstymo? įsitikinkite, kad CSS rodymas nustatytas į Flex, kad būtų įjungtas Flexbox.
