In precedenza, la mia ipotesi width: autoera che la larghezza fosse impostata su quella del contenuto. Ora vedo che prende l'intera larghezza del genitore.
Qualcuno può descrivere le differenze tra questi?
Risposte:
Larghezza automatica
La larghezza iniziale di un elemento a livello di blocco come div o p è auto. Questo lo fa espandere per occupare tutto lo spazio orizzontale disponibile all'interno del suo blocco contenitore. Se ha una spaziatura orizzontale o un bordo, le larghezze di questi non si aggiungono alla larghezza totale dell'elemento.
Larghezza 100%
D'altra parte, se specifichi larghezza: 100%, la larghezza totale dell'elemento sarà il 100% del suo blocco contenitore più qualsiasi margine orizzontale, padding e bordo (a meno che tu non abbia usato box-sizing: border-box, nel qual caso solo i margini vengono aggiunti al 100% per modificare il modo in cui viene calcolata la larghezza totale). Questo potrebbe essere quello che vuoi, ma molto probabilmente non lo è.
Per visualizzare la differenza vedere questa immagine:
width: autosi comporta in questo modo: stackoverflow.com/questions/28353625/...
autofa lo stesso difill-available
width: auto; proverà il più possibile a mantenere un elemento della stessa larghezza del suo contenitore genitore quando viene aggiunto spazio aggiuntivo da margini, spaziatura interna o bordi.
width: 100%;renderà l'elemento largo quanto il contenitore genitore. La spaziatura extra verrà aggiunta alla dimensione dell'elemento indipendentemente dal genitore. Questo in genere causa problemi.
Finché il valore di larghezza è auto, l'elemento può avere margine orizzontale, padding e bordo senza diventare più largo del suo contenitore (a meno che, ovviamente, la somma di margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right è più grande del contenitore). La larghezza della sua casella di contenuto sarà quella che rimane quando il margine, la spaziatura interna e il bordo sono stati sottratti dalla larghezza del contenitore.
D'altra parte, se specifichi larghezza: 100%, la larghezza totale dell'elemento sarà il 100% del suo blocco contenitore più qualsiasi margine orizzontale, padding e bordo (a meno che tu non abbia usato box-sizing: border-box, nel qual caso solo i margini vengono aggiunti al 100% per modificare il modo in cui viene calcolata la larghezza totale). Questo potrebbe essere quello che vuoi, ma molto probabilmente non lo è.
Fonte:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
La larghezza iniziale di un elemento a livello di blocco come div o p è auto.
Usa width: auto per annullare le larghezze specificate in modo esplicito.
se si specifica larghezza: 100%, la larghezza totale dell'elemento sarà il 100% del suo blocco contenitore più qualsiasi margine orizzontale, riempimento e bordo.
Quindi, la prossima volta che ti ritrovi a impostare la larghezza di un elemento a livello di blocco al 100% per far sì che occupi tutta la larghezza disponibile, considera se ciò che vuoi veramente è impostarlo su automatico.
Larghezza 100%: renderà il contenuto al 100%. margin, border, padding verranno aggiunti a questa larghezza e l'elemento andrà in overflow se uno di questi viene aggiunto.
Larghezza automatica: si adatterà all'elemento nello spazio disponibile inclusi margine, bordo e imbottitura. lo spazio rimanente dopo la regolazione di margine + riempimento + bordo sarà disponibile in larghezza / altezza.
Larghezza 100% + dimensione della scatola: bordo scatola: si adatta anche all'elemento nello spazio disponibile, incluso il bordo, il riempimento (il margine lo farà traboccare dal contenitore).
Utilizzando la larghezza: auto; + display: blocco in linea; in css dando un effetto fantastico.
width : auto;
display: inline-block;Quando diciamo
width:auto;la larghezza non supererà mai la larghezza totale dell'elemento genitore. La larghezza massima è la larghezza del genitore. Anche se aggiungiamo bordo, padding e margin, il contenuto dell'elemento stesso diventerà più piccolo per dare spazio a bordo, padding e margine. Nel caso in cui lo spazio richiesto per bordo + riempimento + margine è maggiore della larghezza totale dell'elemento genitore, la larghezza del contenuto diventerà zero.
Quando diciamo
width:100%;la larghezza del contenuto dell'elemento diventerà il 100% dell'elemento genitore e da ora se aggiungiamo bordo, padding o margine allora l'elemento figlio supererà la larghezza dell'elemento genitore e inizierà a traboccare dall'elemento genitore.