Sommario
Browser Web come Firefox, Chrome, Safari, Opera, ecc. Tutti loro segui le regole su come ridimensionare gli elementi a seconda del flusso e del layout della paginaQueste regole possono essere forse molto dettagliate, ma è ciò che ci permette di specificare come devono essere trattati gli elementi in modo che le dimensioni siano sempre mantenute in proporzione a ciò che vogliamo da loro.Proprietà delle dimensioni
Ci sono alcune proprietà di dimensione che ci permettono di dire al browser come dovrebbe interpretare i nostri elementi, vediamone un elenco prima di andare alla loro applicazione:
Larghezza altezza: Configurano la larghezza e l'altezza di un elemento, i valori che può assumere sono i seguenti: auto e.
larghezza minima / altezza minima: Ci permette di impostare la larghezza o l'altezza minima per un elemento, i valori che può assumere sono i seguenti: auto e
larghezza massima / altezza massima: Imposta l'altezza o la larghezza massima accettabile per un elemento, i suoi possibili valori sono: auto e
dimensionamento della scatola: Stabilisce quale parte dell'elemento box viene presa per la dimensione, quelle disponibili sono: content-box padding-box border-box margin-box.
Se non si imposta alcun valore alle proprietà visualizzate, il valore di default sarà: auto, anche se non è specificato, nel senso che sarà il browser a impostare le dimensioni, inoltre come abbiamo visto possiamo impostare le dimensioni utilizzando misure di lunghezza o percentuali, le percentuali vengono calcolate in base alla larghezza dell'elemento contenitore.
Vista la teoria, andremo ora in pratica, vediamo il seguente codice dove imposteremo la dimensione di due elementi in modo da poter vedere come funziona tutto questo:
Esempio
Come possiamo vedere, quello che abbiamo fatto qui è molto semplice, abbiamo stabilito una larghezza e un'altezza per l'elemento div della pagina, quindi specifichiamo due identificatori dove posizioniamo ciascuno diverso dimensionamento della scatolaVediamo cosa genera per noi tutto questo:
Cosa succede se ora giochiamo un po' con il ridimensionamento della dimensione della finestra del browser, sappiamo che il div sarà il 75% della dimensione del suo contenitore, in questo caso il suo contenitore è body che cambia con la finestra e a sua volta l'immagine con il selettore #primo È il 50% della larghezza del suo contenitore, che in questo caso è div, quando lo vediamo sappiamo che qualcosa non verrà mantenuto così com'è, vediamo cosa succede nel browser con tutto questo.
INGRANDIRE
