Ratkaise asettelu- ja ylivuotokysymykset Chrome-kehittäjätyökaluilla

Tässä oppaassa näytän sinulle, miten voit säätää ja ratkaista yleisimpiä asettelu- ja ylivuoto-ongelmia verkkosivuilla Chrome Developer Tools -työkalujen avulla. Yksinkertaisen esimerkin avulla, joka koostuu HTML:stä ja CSS:stä, opit määrittämään elementtien korkeuden oikein ja poistamaan tarpeettomat vierityspalkit. Työkalut Developer Toolsissa mahdollistavat työskentelyn suoraan selaimessa ja muutosten tekemisen välittömästi. Aloita heti!

Tärkeimmät oivallukset

• Flexbox auttaa sinua suunnittelemaan asetteluja tehokkaasti.
• Elementtien korkeus on asetettava oikein välttääksesi ylivuoto-ongelmat.
• Marginaalit ja täytöt voivat johtaa ei-toivottuihin vierityspalkkeihin, jotka voidaan korjata yksinkertaisilla muutoksilla.

Askel askeleelta -opas

Tarkista asettelu ja tee säätöjä

Aloita avaamalla verkkosivu Chrome-selaimessa ja käynnistämällä Developer Tools. Voit tehdä tämän napsauttamalla hiiren oikealla painikkeella sivua ja valitsemalla "Tutki" tai painamalla F12. Siirry sitten "Elements"-välilehteen nähdäksesi HTML-koodin rakenteen.

Ensinnäkin tarkastele pää-Diviä, joka sisältää Flexbox-asettelun. Tässä on alue, jossa voit määrittää Flexbox-konfiguraatiosi. Varmista, että display: flex; on oikein sovellettu ja että loput Divistä, joka käyttää Flex 1:stä, on tarpeeksi tilaa asettelussa.

Täällä näet, että loput-Divi on vain 18,5 pikseliä korkea, mikä on paljon liian vähän halutulle tilalle. Tätä korkeutta tulisi säätää sen mukaan, että koko käytettävissä oleva tila hyödynnetään.

Säädä ylemmät elementit korkeuden mukaan

Varmistaaksesi, että loput-Divi ottaa koko sivun korkeuden, sinun on asetettava ylemmät elementit, mukaan lukien body ja html, 100 %:iin. Palaa tyyleihin ja aseta bodyn korkeus 100 %:iin.

Huomaat, ettei mikään ole vielä muuttunut. Mitä sinun on myös tarkistettava, on, onko html-tagi asetettu myös 100 %:iin korkeuteen. Tämä on tärkeä edellytys, jotta kaikki toimisi.

Kun olet asettanut html-tagin korkeuden 100 %:iin, asettelu tulisi nyt näkyä oikein. Loput-Divi täyttää nyt koko sivun tilan.

Säädä Flexbox-asetukset

Toinen vaihe on Flexbox-asetusten hienosäätö. Voit säätää lasten elementtien suuntaa Flex-säiliössä säätämällä vaihtoehtoja, kuten align-items tai justify-content. Nämä asetukset auttavat sinua hallitsemaan sisältöjen sijainteja säiliössäsi.

Kun kokeilet tätä, huolehdi siitä, että tarkkailet visuaalista esitystä. Toista säätöjä, kunnes olet tyytyväinen sisältöjen järjestykseen.

Ylivuoto-ongelmien tunnistaminen ja korjaaminen

Kohtaat nyt toisen ongelman, nimittäin ylivuodon, joka aiheuttaa ei-toivottuja vierityspalkkeja. Löytääksesi elementit, jotka ovat vastuussa vierityspalkista, napsauta hiiren oikealla painikkeella vierityspalkkia ja valitse "Tutki".

Tarkastelemalla Inspect-alueelta huomaat, että body elementillä on 8 pikselin reunus. Tämä reunus voi olla syynä siihen, että sivusi on yli 100 %:n levyinen, mikä aiheuttaa ylivuodon.

Jotta tämä ongelma korjataan, aseta bodyn reunus arvoon 0 ja pidä mielessäsi, että yleensä suoritat CSS-nollaus, jotta luodaan yhtenäisyyttä. Tämä tarkoittaa, että kaikki reunat asetetaan nollaksi ennen kuin lisäät omat reunasi uudelleen.

Täytön ja laatikon koon säätäminen

Korjattuasi reunavaraongelman sinun tulee tarkistaa myös täyttö. Html-tunnisteessa saattaa olla myös täyttö, joka aiheuttaa ylivuodon. Voit asettaa täytön nollaan tai vaihtoehtoisesti asettaa laatikon koon border-box-tilaan. Tällöin täyttö otetaan huomioon määritellyn leveyden sisällä ja vierityspalkki häviää.

Kun olet tehnyt kaiken tämän, sinun tulisi nyt saada rullauspalkiton asettelu, joka mukautuu optimaalisesti käytettävissä olevaan näytön tilaan.

Yhteenveto

Tässä oppaassa olet oppinut tunnistamaan ja korjaamaan Chrome Developer Toolsin avulla sivustollasi olevat asetteluongelmat ja ylivuoto-ongelmat. Olet ymmärtänyt joustolaatikon merkityksen sekä oikeat korkeus- ja reunavara-asetukset luodaksesi esteettisesti miellyttävän asettelun.