Turinys
Žiniatinklio naršyklės patinka „Firefox“, „Chrome“, „Safari“, „Opera“ ir kt. Visi jie laikykitės taisyklių, kaip pakeisti elementų dydį, atsižvelgiant į puslapio srautą ir išdėstymąŠios taisyklės gali būti labai išsamios, tačiau būtent tai leidžia mums nurodyti, kaip turėtų būti elgiamasi su elementais, kad dydžiai visada būtų proporcingi tam, ko norime iš jų.Dydžio savybės
Yra keletas dydžio savybių, leidžiančių mums pasakyti naršyklei, kaip ji turėtų interpretuoti mūsų elementus, prieš eidami į jų programą, pažiūrėkime jų sąrašą:
Plotis Aukštis: Jie sukonfigūruoja elemento plotį ir aukštį, jo reikšmės gali būti šios: automatinis ir.
min. plotis / min. aukštis: Tai leidžia mums nustatyti minimalų elemento plotį ar aukštį, jo reikšmės gali būti tokios: automatinis ir
maksimalus plotis / maks. aukštis: Nustato didžiausią leistiną elemento aukštį ar plotį, jo galimos vertės yra: auto ir
dėžutės dydžio nustatymas: Nustatoma, kuri elemento langelio dalis yra paimta pagal dydį, galimos: turinio langelio padding-box border-box margin-box.
Jei nenustatysite jokios vertės peržiūrimoms ypatybėms, numatytoji reikšmė bus: automatinė, net jei ji nenurodyta, o tai reiškia, kad dydžius nustato naršyklė, taip pat, kaip matėme, dydžius galime nustatyti naudodami ilgio matavimai arba procentai, procentai apskaičiuojami pagal konteinerio elemento plotį.
Pamatę teoriją, dabar pereisime prie praktikos, pažiūrėkime šį kodą, kuriame nustatysime dviejų elementų dydį, kad galėtume pamatyti, kaip visa tai veikia:
Pavyzdys
Kaip matome, tai, ką mes čia padarėme, yra labai paprasta, mes nustatėme puslapio div elemento plotį ir aukštį, tada nurodome du identifikatorius, į kuriuos įdėsime skirtingus dėžutės dydžio nustatymasPažiūrėkime, ką visa tai mums sukuria:
Kas atsitiks, jei dabar šiek tiek pažaisime keisdami naršyklės lango dydį, žinome, kad div bus 75% jo konteinerio dydžio, šiuo atveju jo konteineris yra korpusas, kuris keičiasi su langu ir savo ruožtu vaizdas su selektoriumi #Pirmas Tai yra 50% jo konteinerio pločio, kuris šiuo atveju yra div, kai tai matome, žinome, kad kažkas nebus saugoma taip, kaip yra, pažiūrėkime, kas su visa tai vyksta naršyklėje.
DIDELIS
