Cuprins
Browserelor web le place Firefox, Chrome, Safari, Opera etc.. Toti urmați reguli privind modul de redimensionare a elementelor în funcție de fluxul și aspectul paginiiAceste reguli pot fi foarte detaliate, probabil, dar este ceea ce ne permite să specificăm modul în care elementele ar trebui tratate, astfel încât dimensiunile să fie păstrate întotdeauna proporțional cu ceea ce dorim de la ele.Proprietăți de dimensiune
Există câteva proprietăți de dimensiuni care ne permit să spunem browserului cum ar trebui să interpreteze elementele noastre, să vedem o listă a acestora înainte de a merge la aplicația lor:
Latime inaltime: Acestea configurează lățimea și înălțimea unui element, valorile pe care le poate lua sunt următoarele: auto și.
lățime min / înălțime min: Ne permite să setăm lățimea sau înălțimea minimă pentru un element, valorile pe care le poate lua sunt următoarele: auto și
lățime maximă / înălțime maximă: Setează înălțimea sau lățimea maximă acceptabilă pentru un element, valorile sale posibile sunt: auto și
dimensionare cutie: Stabilește ce parte a casetei de elemente este luată pentru dimensiune, cele disponibile sunt: conținutul-caseta de umplere-caseta de margine-caseta de margine-caseta.
Dacă nu setați nicio valoare la proprietățile vizualizate, valoarea implicită va fi: auto, chiar dacă nu este specificată, ceea ce înseamnă că browserul va fi cel care setează dimensiunile, de asemenea, așa cum am văzut, putem seta dimensiunile folosind măsurători de lungime sau procente, procentele fiind calculate pe baza lățimii elementului container.
După ce am văzut teoria, acum vom intra în practică, să vedem următorul cod în care vom seta dimensiunea a două elemente, astfel încât să putem vedea cum funcționează toate acestea:
Exemplu
După cum putem vedea, ceea ce am făcut aici este foarte simplu, am stabilit o lățime și o înălțime pentru elementul div al paginii, apoi specificăm doi identificatori unde plasăm fiecare unul diferit dimensionare cutieSă vedem ce ne generează toate acestea:
Ce se întâmplă dacă jucăm un pic acum cu redimensionarea dimensiunii ferestrei browserului, știm că divul va fi 75% din dimensiunea containerului său, în acest caz containerul său este corpul care se schimbă odată cu fereastra și la rândul său imaginea cu selector #primul Este 50% din lățimea containerului său, care în acest caz este div, când vedem acest lucru știm că ceva nu va fi păstrat așa cum este, să vedem ce se întâmplă în browser cu toate acestea.
MARI
