Rešite težave s postavitvijo in prelivanjem z orodji razvijalca Chrome

V tej navodilih ti bom pokazal/a, kako lahko s pomočjo orodij za razvijalce v brskalniku Chrome prilagodiš in rešiš pogoste težave s postavitvijo in prelivi na spletnih straneh. S preprostim primerom, sestavljenim iz HTML-ja in CSS-ja, se boš naučil/a, kako pravilno določiti višino elementov in odpraviti odvečne drsnike. Orodja v razvijalskih orodjih ti omogočajo neposredno delo v brskalniku in takojšnje spremembe. Začniva!

Najpomembnejše ugotovitve

• Flexbox ti pomaga pri učinkovitem oblikovanju postavitev.
• Višino elementov je treba pravilno določiti, da se izognete težavam s prelivom.
• Robni prostor in polnila lahko povzročijo nezaželene drsnike, ki jih je mogoče odpraviti z enostavnimi prilagoditvami.

Korak-za-korakom navodila

Preverjanje postavitve in prilagajanje

Začni tako, da odpreš spletno stran v Chromeu in začneš razvijalska orodja. To lahko storiš tako, da klikneš z desno miškino tipko na stran in izbereš "Preglej" ali preprosto pritisneš F12. Nato pojdite na zavihek "Elementi", da si ogledaš strukturo HTML-ja.

Najprej si oglej glavni div, ki vsebuje postavitev Flexbox. To je območje, kjer lahko nastaviš svojo konfiguracijo Flexbox. Preveri, ali je display: flex; pravilno uporabljen in ali preostali div, ki uporablja Flex 1, ima dovolj prostora v postavitvi.

Tukaj lahko vidiš, da je preostali div visok le 18,5 slikovnih pik, kar je veliko premalo za želeno mesto. Višino je treba ustrezno prilagoditi, da se uporabi ves razpoložljivi prostor.

Prilagajanje višine nadrejenih elementov

Da se prepričaš, da tvoj preostali div zavzame celotno višino strani, moraš nastaviti višino nadrejenih elementov, vključno z body in html, na 100 %. Vrni se na sloge in nastavi višino telesa na 100 %.

Opazil/a boš, da se še ni nič spremenilo. Poleg tega moraš preveriti, ali je oznaka html prav tako nastavljena na 100 % višino. To je pomembno za delovanje vsega.

Ko boš nastavil/a višino oznake html na 100 %, bi morala biti postavitev sedaj prikazana pravilno. Preostali div bo zdaj zapolnil celoten prostor strani.

Prilagajanje nastavitev Flexbox-a

Naslednji korak je prilagajanje nastavitev Flexbox-a. Lahko prilagodiš usmeritev otroških elementov v fleksibilnem vsebniku tako, da preizkusiš možnosti, kot so align-items ali justify-content. Te nastavitve ti pomagajo nadzorovati položaje vsebin znotraj tvojega kontejnerja.

Medtem ko eksperimentiraš, bodi pozoren/a na vizualni prikaz. Ponovi prilagoditve, dokler ne boš zadovoljen/a z razporeditvijo vsebine.

Identifikacija in reševanje težav s prelivom

Sedaj se srečuješ z drugo težavo, in sicer s prelivom, ki povzroča nezaželene drsnike. Da ugotoviš, kateri elementi so odgovorni za drsnik, klikni z desno miškino tipko na drsnik in izberi "Preglej".

V območju Pregleda boš videl/a, da ima element body margino 8 slikovnih pik. Ta robni prostor je lahko odgovoren za to, da tvoja stran presega širino več kot 100 % in povzroči preliv.

Za rešitev tega problema nastavi margino telesa na 0 in imej v mislih, da običajno narediš ponastavitev CSS-a, da vzpostaviš doslednost. To pomeni, da nastaviš vse margine na nič, preden ponovno dodajaš svoje lastne margine.

Nastavitev Paddinga in Box-Sizinga

Po odpravi težave z Marginom morate preveriti tudi Padding. V html oznaki morda obstaja tudi Padding, ki prispeva k prelivanju. Tu lahko Padding nastavite na 0 ali pa alternativno nastavite Box-Sizing na border-box. S tem bo Padding upoštevan znotraj določene širine in bovnašanje izginilo.

Ko boste vse to implementirali, bi morali imeti zdaj strukturo postavitve brez vodoravnih drsnikov, ki se optimalno prilagaja razpoložljivemu zaslonskemu prostoru.

Povzetek

V tej vadnici ste se naučili, kako z orodji Chrome Developer Tools identificirati in odpraviti težave s postavitvijo in prelivanjem na vaši spletni strani. Razumeli ste pomen Flexboxa in pravilne nastavitve višin ter Marginov, da ustvarite estetsko privlačno postavitev.