In precedenza la mia ipotesi sulla larghezza automatica funziona come se il suo contenuto fosse, ma ora con una piccola conoscenza non funziona come se il suo blocco fosse pieno. Quindi sono confuso qui con la larghezza 100% e la larghezza automatica. Qualcuno può descrivermi per favore delle differenze tra queste con la spiegazione?differenza tra larghezza auto e larghezza 100%
auto Larghezza
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 quelle non si aggiungono alla larghezza totale dell'elemento.
Larghezza 100%
D'altra parte, se si specifica width: 100%, larghezza totale dell'elemento sarà pari al 100% del suo blocco contenitore più il margine orizzontale, padding e border (a meno che non hai usato il ridimensionamento della casella: border-box, nel qual caso vengono aggiunti solo i margini al 100% per cambiare il modo in cui viene calcolata la larghezza totale). Questo potrebbe essere ciò che vuoi, ma molto probabilmente non lo è.
Per visualizzare la differenza vedere questa foto:
Per coloro che sono curiosi sul perché 'width: auto' si comporta in questo modo: http://stackoverflow.com/ domande/28353625/why-does-percentage-width-work-even-if-no-explicit-width-value-given-contain/28354270 # 28354270 –
quindi 'auto' fa lo stesso di' fill-available' – jiggunjer
Finché il valore della larghezza è automatico, l'elemento può avere orizzontale margine, padding e border senza diventare più ampio del suo contenitore (a meno che la somma di margine-sinistra + bordo-sinistra-larghezza + padding-sinistra + padding-destra + border-right-width + margin-right sia maggiore del contenitore). La larghezza della sua casella di contenuto sarà quella che rimane quando il margine, il riempimento e il bordo sono stati sottratti dalla larghezza del contenitore.
D'altra parte, se si specifica la larghezza: 100%, la larghezza totale dell'elemento sarà il 100% del suo blocco contenitore più qualsiasi margine orizzontale, spaziatura e bordo (a meno che non si sia utilizzato il ridimensionamento della casella: border-box , nel qual caso vengono aggiunti solo i margini al 100% per cambiare il modo in cui viene calcolata la larghezza totale). Questo potrebbe essere ciò che vuoi, ma molto probabilmente non lo è.
Fonte:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Si tratta di margini e di frontiera. Se usi width: auto, quindi aggiungi il bordo, il tuo div non diventerà più grande del suo contenitore. D'altra parte, se si utilizza width: 100% e alcuni bordi, la larghezza dell'elemento sarà 100% + bordo o margine. Per maggiori informazioni vedi this.
La larghezza iniziale di un elemento a livello di blocco come div o p è automatica.
Usa larghezza: auto per annullare larghe specificate esplicitamente.
se si specifica larghezza: 100%, la larghezza totale dell'elemento sarà pari al 100% del suo blocco contenitore più qualsiasi margine orizzontale, spaziatura e bordo.
Così, la prossima volta che ti trovi ad 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.
Ho scritto un post approfondito sulla differenza su my blog.
width: auto; tenterà il più possibile di mantenere un elemento della stessa larghezza del contenitore padre quando lo spazio aggiuntivo viene aggiunto da margini, spaziatura o bordi.
width: 100%; renderà l'elemento largo come il contenitore padre. La spaziatura aggiuntiva verrà aggiunta alla dimensione dell'elemento senza riguardo al genitore. Questo in genere causa problemi.
la stessa cosa di @ C-link fornito ma un'interfaccia grafica in più. quindi +1 –
Utilizzando width: auto; + display: blocco in linea; in css dando un effetto fantastico.
width : auto;
display: inline-block;
Questo non risponde alla domanda di differenza tra 100 & e auto. – JoeTidee
Sì, lo so, ma sto cercando di mostrare qui su * width: auto e display: inline-block *. Quando vogliamo aumentare automaticamente la larghezza di qualsiasi elemento a livello di blocco, possiamo usarlo. E differenza tra 100% e auto –
Larghezza 100%: Sarà rendere i contenuti con il 100%. margine, bordo, il riempimento sarà aggiunto a questa larghezza e l'elemento si sovrapporrà se qualcuno di questi aggiunto.
Larghezza auto: Si adatta all'elemento nello spazio disponibile incluso margine, bordo e riempimento. lo spazio rimanente dopo la regolazione del margine + padding + bordo sarà disponibile larghezza/altezza.
Larghezza 100% + box-sizing: bordo casella: Sarà anche adatta l'elemento nello spazio disponibile tra cui bordo, padding (margine farà traboccare contenitore).
possibile duplicato di [Larghezza impostazione: porta automatica alla larghezza: 100%] (http://stackoverflow.com/questions/2042645/setting-widthauto-lead-to-width100) –
In breve: 1) auto , genitore div width/height sarà la somma dei suoi figli. 2) 100 percento, la sua larghezza/altezza saranno i suoi genitori. Vedere l'articolo [qui] (http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/) –