Layout CSS - width e max-width

Usa width, max-width e margin: auto;

Come descritto nel capitolo precedente, gli elementi bloccanti occupano sempre tutta la larghezza disponibile (stendendosi il più possibile a sinistra e a destra).

Imposta la larghezza degli elementi bloccanti larghezza Questo impedirà che si estenda ai margini del suo contenitore. Poi, puoi impostare il margine su auto per centrare l'elemento nel suo contenitore. L'elemento occuperà la larghezza specificata e lo spazio in eccesso sarà distribuito uniformemente tra i margini:

La larghezza di questo elemento <div> è di 500px, il margine è impostato su auto.

Attenzione:Quando la finestra del browser è più piccola della larghezza dell'elemento, questa <div> può causare problemi. Il browser aggiungerà una barra di scorrimento orizzontale alla pagina.

In questo caso, utilizzare max-width Può migliorare la gestione del browser delle finestre piccole. È molto importante per rendere il sito disponibile su dispositivi di piccole dimensioni:

L'elemento <div> ha una larghezza massima di 500px e il margine è impostato su auto.

Suggerimento:Ajusta la dimensione della finestra del browser a meno di 500 pixel per vedere la differenza tra i due div!

Questo è un esempio dei due div sopra:

Esempio

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}

Prova da solo