Kujundamise ja ülevoolu probleemide lahendamine Chrome'i arendajate tööriistadega

Selles juhendis näitan sulle, kuidas saad Chrome'i arendaja tööriistadega kohandada ja lahendada lehekülgedel esinevaid tavapäraseid paigutus- ja ülevooluprobleeme. Lihtsa näite abil, koosneb HTML-ist ja CSS-ist, õpid, kuidas määrata elementide kõrgusi õigesti ja kuidas üleliigseid kerimisribasid eemaldada. Arendaja tööriistade tööriistad võimaldavad sul brauseris otse töötada ja teha kohest muudatusi. Lähme kohe pihta!

Olulisemad teadmised

• Flexbox aitab sul luua tõhusaid paigutusi.
• Elementide kõrgus tuleb õigesti määrata, et vältida ülevooluprobleeme.
• Ääristus ja polsterdus võivad viia soovimatute kerimisribadeni, mida saab lihtsate muudatustega parandada.

Sammsammuline juhend

Paigutuse kontrollimine ja kohandamine

Alusta veebilehe avamisega Chrome'is ja käivita arendaja tööriistad. Seda saad teha, paremklõpsates lehel ja valides "Uurimine" või vajutades lihtsalt klahvi F12. Seejärel mine "Elements" vahekaardile, et näha HTML-koodi struktuuri.

Kõigepealt vaata põhiline DIV üle, milles on Flexboxi paigutus. Siin saad määrata oma Flexboxi konfiguratsiooni. Kontrolli, kas display: flex; on õigesti rakendatud ja kas ülejäänud DIV, mis kasutab Flex 1, omab piisavalt ruumi paigutuses.

Siin on näha, et ülejäänud DIV on vaid 18,5 pikslit kõrge, mis on liiga vähe soovitud ruumi jaoks. See kõrgus tuleks vastavalt kõrgusele kohandada, et kasutada ära kogu olemasolev ruum.

Vanemelementide kõrguse kohandamine

Tagamaks, et sinu ülejäänud DIV hõlmaks kogu lehe kõrgust, pead vanemelementide, sealhulgas body ja html, kõrguse määrama 100% -le. Mine tagasi stiilide juurde ja sea body kõrgus 100% -le.

Näed, et midagi pole veel muutunud. Lisaks pead kontrollima, kas html silt on samuti määratletud 100% kõrgusel. See on oluline eeldus, et kõik toimiks.

Kui oled seadnud html sildi kõrguseks 100%, peaks paigutus nüüd korralikult kuvatama. Ülejäänud DIV täidab nüüd kogu lehe ruumi.

Flexboxi seadistuste peenustamine

Järgmine samm on Flexboxi seadistuste peenustamine. Saad kohandada paindikonteineri laste elementide ausust, proovides võimalusi nagu align-items või justify-content. Need seadistused aitavad sul juhtida sisu asukohti oma konteineris.

Eksperimenteerimise ajal jälgi visuaalset esitlust. Korda kohandusi, kuni oled rahul sisu paigutusega.

Ülevooluprobleemide tuvastamine ja parandamine

Nüüd seisad silmitsi teise probleemiga, nimelt ülevooluga, mis põhjustab soovimatuid kerimisribasid. Et välja selgitada, millised elemendid vastutavad kerimisriba eest, paremklõpsa kerimisribal ja vali "Uurimine".

Inspekteerimisalal märkad, et body elemendil on 8 pikslit marginaali. See marginaal võib olla vastutav selle eest, et su lehekülg on üle 100% lai, tekitades seeläbi ülevoolu.

Selle probleemi lahendamiseks määra body marginaaliks 0 ja pea meeles, et tavaliselt tehakse CSS-i nullimiseks CSS-ühtlustamiseks CSS-ühtlustus. See tähendab, et enne kui lisad oma marginaalid tagasi, nullitakse kõik marginaalid.

Täidis ja kastimõõtmeid kohandamine

Pärast vahetu probleemi lahendamist pead kontrollima ka täidist. HTML-sildis võib olla ka täidis, mis aitab kaasa ülevoolule. Siin saad täidise nulli seada või alternatiivselt kastimõõtmised piirjoonekarbile määrata. Seejärel arvestatakse täidist määratud laiuse piires ja kerimisriba kaob.

Kui oled kõik sisse ehitanud, peaksid nüüd omama kerimisribadeta paigutusstruktuuri, mis kohaneb optimaalselt saadavaloleva ekraaniruumiga.

Kokkuvõte

Selles juhendis õppisid, kuidas Chrome'i arendajatööriistade abil tuvastada ja parandada oma veebisaidil paigutusprobleeme ja ülevooluvigu. Sa oled saanud aru Flexboxi olulisusest ja õigetest kõrguste ning servamarginaalide seadistustest, et luua esteetiliselt meeldiv paigutus.