Satura rādītājs
Tīmekļa pārlūkprogrammām, piemēram Firefox, Chrome, Safari, Opera utt. Visus ievērojiet noteikumus par to, kā mainīt elementu izmērus atkarībā no lapas plūsmas un izkārtojumaŠie noteikumi, iespējams, var būt ļoti sīki izstrādāti, taču tieši tas ļauj mums noteikt, kā pret elementiem jāizturas, lai izmēri vienmēr būtu proporcionāli tam, ko mēs no tiem vēlamies.Izmēra īpašības
Ir daži lieluma rekvizīti, kas ļauj mums pateikt pārlūkprogrammai, kā tai vajadzētu interpretēt mūsu elementus. Apskatīsim to sarakstu pirms došanās uz to lietojumprogrammu:
Platums augstums: Tie konfigurē elementa platumu un augstumu, tā vērtības var būt šādas: auto un.
min-platums / min-augstums: Tas ļauj mums iestatīt elementa minimālo platumu vai augstumu, tā vērtības var būt šādas: auto un
maksimālais platums / maksimālais augstums: Iestata maksimālo pieļaujamo elementa augstumu vai platumu, tā iespējamās vērtības ir: auto un
kastes izmēri: Tas nosaka, kura elementu kastes daļa ir ņemta pēc izmēra, un pieejamie ir šādi: content-box padding-box border-box margin-box.
Ja skatītajiem rekvizītiem neiestatīsit nekādu vērtību, noklusējuma vērtība būs: automātiska, pat ja tā nav norādīta, kas nozīmē, ka izmērus nosaka pārlūkprogramma, kā arī mēs redzējām, ka varam iestatīt izmērus, izmantojot garuma mērījumi vai procenti, procentus aprēķinot, pamatojoties uz konteinera elementa platumu.
Iepazīstoties ar teoriju, tagad ķersimies pie prakses, apskatīsim šādu kodu, kurā mēs iestatīsim divu elementu lielumu, lai mēs varētu redzēt, kā tas viss darbojas:
Piemērs
Kā redzam, šeit paveiktais ir ļoti vienkāršs, mēs noteicām lapas div elementa platumu un augstumu, pēc tam norādām divus identifikatorus, kur mēs ievietojam katru citu kastes izmēriApskatīsim, ko tas viss mums rada:
Kas notiek, ja mēs tagad mazliet spēlējamies ar pārlūkprogrammas loga izmēra maiņu, mēs zinām, ka div būs 75% no konteinera lieluma, šajā gadījumā tā konteiners ir pamatteksts, kas mainās līdz ar logu un savukārt attēlu ar selektoru #pirmais Tas ir 50% no konteinera platuma, kas šajā gadījumā ir div, to redzot, mēs zinām, ka kaut kas netiks saglabāts tāds, kāds tas ir, paskatīsimies, kas ar to visu notiek pārlūkprogrammā.
PALIELINĀT
