Šajā rokasgrāmatā es jums parādīšu, kā izmantot Chrome izstrādātāja rīkus , lai pielāgotu un atrisinātu bieži sastopamas izkārtojuma un pārplūdes problēmas vietnēs. Izmantojot vienkāršu piemēru, kas sastāv no HTML un CSS , uzzināsiet, kā pareizi iestatīt elementu augstumu un novērst nevajadzīgas ritināšanas joslas. Izstrādātāja rīku rīki ļauj strādāt tieši pārlūkprogrammā un veikt tūlītējas izmaiņas. Sāksim darbu uzreiz!
Galvenie secinājumi
- Flexbox palīdz efektīvi izstrādāt izkārtojumus.
- Lai izvairītos no pārplūšanas problēmām, ir pareizi jānosaka elementu augstums.
- Margas un polsterējums var radīt nevēlamas ritināšanas joslas, ko var novērst ar vienkāršiem pielāgojumiem.
Soli pa solim
Pārbaudiet izkārtojumu un veiciet pielāgojumus
Sāciet, atverot tīmekļa vietni pārlūkprogrammā Chrome un iedarbinot Izstrādātāja rīkus. To var izdarīt, uzklikšķinot uz lapas ar peles labo pogu un izvēloties "Izpētīt" vai vienkārši nospiežot F12. Pēc tam atveriet cilni "Elements" (Elementi), lai apskatītu HTML koda struktūru.
Vispirms aplūkojiet galveno divdaļu, kurā ir elastīgās kastes izkārtojums. Šajā apgabalā varat iestatīt elastīgās kastes konfigurāciju. Pārbaudiet, vai ir pareizi piemērots display: flex; un vai pārējam divam, kas izmanto flex 1, ir pietiekami daudz vietas izkārtojumā.
Šeit redzams, ka atpūtas divs ir tikai 18,5 pikseļu augsts, kas ir pārāk mazs, lai nodrošinātu vajadzīgo vietu. Šis augstums ir attiecīgi jāpielāgo, lai tiktu izmantota visa pieejamā vieta.
Pielāgojiet vecāko elementu augstumu
Lai nodrošinātu, ka jūsu atpūtas divaizdevums aizņem visu lapas augstumu, jums ir jānoregulē vecāko elementu, tostarp body un html, augstums līdz 100 %. Atgriezieties pie stiliem un iestatiet ķermeņa augstumu uz 100 %.
Redzēsiet, ka nekas vēl nav mainījies. Vēl jāpārbauda, vai arī html tagam ir iestatīts 100% augstums. Tas ir svarīgs priekšnoteikums, lai viss darbotos.
Tiklīdz esat iestatījis html birkas augstumu uz 100%, izkārtojumam tagad vajadzētu tikt pareizi attēlotam. Pārējais divs tagad aizpildīs visu lapas laukumu.
Flexbox iestatījumu precizēšana
Vēl viens solis ir precizēt elastīgās kastes iestatījumus. Jūs varat pielāgot pakārtoto elementu izlīdzināšanu flexkonteinerī, izmēģinot tādas opcijas kā align-items vai justify-content. Šie iestatījumi palīdz kontrolēt satura pozīcijas konteinerā.
Veicot eksperimentus, pārliecinieties, vai tiek novērots vizuālais izskats. Atkārtojiet korekcijas, līdz esat apmierināts ar satura izvietojumu.
Pārplūdes problēmu identificēšana un novēršana
Tagad saskarsieties ar vēl vienu problēmu, proti, pārplūšanu, kas izraisa nevēlamas ritināšanas joslas. Lai noskaidrotu, kuri elementi ir atbildīgi par ritināšanas joslu, noklikšķiniet ar peles labo pogu uz ritināšanas joslas un izvēlieties "Inspect" (pārbaudīt).
Inspect apgabalā redzēsiet, ka elementam body ir 8 pikseļu rezerve. Šī rezerve var būt atbildīga par to, ka jūsu lapas platums ir lielāks par 100 %, kas rada pārplūšanu.
Lai atrisinātu šo problēmu, iestatiet body elementa rezervi uz 0 un paturiet prātā, ka parasti veicat CSS atiestatīšanu, lai radītu konsekvenci. Tas nozīmē, ka visas malas ir iestatītas uz nulli, pirms atkal pievienojat savas malas.
Pielāgojiet izvietojumu un kastes lielumu
Pēc tam, kad ir novērsta malas problēma, ir jāpārbauda arī izvietojums. Iespējams, jūsu html tagā ir arī izvietojums, kas veicina pārplūšanu. Šeit varat iestatīt izvietojumu uz 0 vai arī iestatīt kastes izmēru uz border-box. Tas nozīmē, ka izvietojums tiek ņemts vērā noteiktā platuma ietvaros un ritināšanas josla pazūd.
Kad tas viss ir instalēts, tagad jums vajadzētu būt izkārtojuma struktūrai bez ritjoslām, kas optimāli pielāgojas pieejamai ekrāna vietai.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot Chrome izstrādātāja rīkus, lai identificētu un novērstu izkārtojuma problēmas un pārplūšanas kļūdas savā tīmekļa vietnē. Jūs esat sapratuši, cik svarīgi ir elastīgās kastes (flexbox) un pareizie augstuma un atstatuma iestatījumi, lai izveidotu estētiski pievilcīgu izkārtojumu.
Biežāk uzdotie jautājumi
Kā Chrome izstrādātāja rīkos var mainīt HTML elementu lielumu? HTML elementa augstumu un platumu var pielāgot stilos un ievadīt vēlamo vērtību.
Ko darīt, ja izkārtojums nedarbojas atbilstoši gaidītajam? Izmantojiet inspectiv funkcijas, lai noskaidrotu, vai vecāku elementu atstarpes vai izvietojums ietekmē vietu.
Kā iestatīt nulles rezervi? stilos zem vēlamā elementa pievienojiet margin: 0;.
Kāda ir atšķirība starp padding un margin?padding ir elementa iekšējā atstarpe, bet margin ir ārējā atstarpe.
Kā pārslēgties uz elastīgu izkārtojumu?pārliecinieties, vai CSS displejs ir iestatīts uz Flex, lai aktivizētu Flexbox.
