Resumindo: 1) auto, a largura / altura do div pai será a soma de seus filhos. 2) 100 por cento, sua largura / altura será dos pais. Veja o artigo aqui
Alan Dong
Respostas:
141
Largura automática
A largura inicial de um elemento de nível de bloco como div ou p é automática. Isso faz com que ele se expanda para ocupar todo o espaço horizontal disponível dentro do bloco que o contém. Se houver qualquer preenchimento ou borda horizontal, as larguras deles não são adicionadas à largura total do elemento.
Largura 100%
Por outro lado, se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado tamanho de caixa: caixa de borda, nesse caso apenas as margens são adicionadas aos 100% para alterar como sua largura total é calculada). Isso pode ser o que você deseja, mas provavelmente não é.
Então, basicamente, não tem nada a ver com o tamanho do conteúdo dos elementos, mas se refere totalmente à largura do pai?
haemse
82
width: auto; tentará o máximo possível manter um elemento com a mesma largura de seu contêiner pai quando espaço adicional for adicionado a partir das margens, preenchimento ou bordas.
width: 100%;tornará o elemento tão largo quanto o contêiner pai. Espaçamento extra será adicionado ao tamanho do elemento, independentemente do pai. Isso geralmente causa problemas.
a mesma coisa que o @ C-link fornecido, mas uma interface mais gráfica extra. então +1
Navin Rauniyar
8
Trata-se de margens e limites. Se você usar width: autoe adicionar borda, seu div não ficará maior que seu contêiner. Por outro lado, se você usar width: 100%e alguma borda, a largura do elemento será 100% + borda ou margem. Para mais informações veja isto .
Contanto que o valor da largura seja automático, o elemento pode ter margem horizontal, preenchimento e borda sem se tornar mais largo que seu contêiner (a menos, é claro, a soma de margem esquerda + borda esquerda largura + preenchimento esquerdo + preenchimento direito + border-right-width + margin-right é maior que o contêiner). A largura de sua caixa de conteúdo será o que restar quando a margem, o preenchimento e a borda forem subtraídos da largura do contêiner.
Por outro lado, se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado tamanho de caixa: caixa de borda, nesse caso apenas as margens são adicionadas aos 100% para alterar como sua largura total é calculada). Isso pode ser o que você deseja, mas provavelmente não é.
A largura inicial de um elemento de nível de bloco como div ou p é automática.
Use width: auto para desfazer larguras explicitamente especificadas.
se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda.
Então, da próxima vez que você definir a largura de um elemento de nível de bloco para 100% para fazê-lo ocupar toda a largura disponível, considere se o que você realmente deseja é defini-lo como automático.
Largura 100%:
fará o conteúdo com 100%. margem, borda, preenchimento serão adicionados a essa largura e o elemento irá estourar se algum desses for adicionado.
Largura automática:
Vai caber o elemento no espaço disponível, incluindo margem, borda e preenchimento. o espaço restante após o ajuste de margem + preenchimento + borda ficará disponível largura / altura.
Largura 100% + tamanho da caixa: caixa de borda:
Ele também vai caber o elemento no espaço disponível, incluindo borda, preenchimento (a margem fará com que ele transborde o contêiner).
Isso não responde à questão da diferença entre 100 & e automático.
JoeTidee
1
Sim, eu sei, mas estou tentando mostrar aqui sobre width: auto e display: inline-block . Quando queremos aumentar automaticamente a largura de qualquer elemento de nível de bloco, podemos usar isso. E a diferença entre 100% e auto
Mohammed Javed
0
Quando dizemos
width:auto;
largura nunca excederá a largura total do elemento pai. A largura máxima é a largura do pai. Mesmo se adicionarmos borda, preenchimento e margem, o conteúdo do próprio elemento se tornará menor para dar espaço para borda, preenchimento e margem. Caso o espaço necessário para borda + preenchimento + margem seja maior que a largura total do elemento pai, a largura do conteúdo se tornará zero.
Quando dizemos
width:100%;
largura do conteúdo do elemento se tornará 100% do elemento pai e, a partir de agora, se adicionarmos borda, preenchimento ou margem, isso fará com que o elemento filho exceda a largura do elemento pai e começará a transbordar do elemento pai.
Respostas:
Largura automática
Largura 100%
Para visualizar a diferença veja esta imagem:
Fonte
fonte
width: autoque se comporta dessa maneira: stackoverflow.com/questions/28353625/…autofaz o mesmo quefill-availablewidth: auto;tentará o máximo possível manter um elemento com a mesma largura de seu contêiner pai quando espaço adicional for adicionado a partir das margens, preenchimento ou bordas.width: 100%;tornará o elemento tão largo quanto o contêiner pai. Espaçamento extra será adicionado ao tamanho do elemento, independentemente do pai. Isso geralmente causa problemas.fonte
Trata-se de margens e limites. Se você usar
width: autoe adicionar borda, seu div não ficará maior que seu contêiner. Por outro lado, se você usarwidth: 100%e alguma borda, a largura do elemento será 100% + borda ou margem. Para mais informações veja isto .fonte
Contanto que o valor da largura seja automático, o elemento pode ter margem horizontal, preenchimento e borda sem se tornar mais largo que seu contêiner (a menos, é claro, a soma de margem esquerda + borda esquerda largura + preenchimento esquerdo + preenchimento direito + border-right-width + margin-right é maior que o contêiner). A largura de sua caixa de conteúdo será o que restar quando a margem, o preenchimento e a borda forem subtraídos da largura do contêiner.
Por outro lado, se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado tamanho de caixa: caixa de borda, nesse caso apenas as margens são adicionadas aos 100% para alterar como sua largura total é calculada). Isso pode ser o que você deseja, mas provavelmente não é.
Fonte:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
fonte
A largura inicial de um elemento de nível de bloco como div ou p é automática.
Use width: auto para desfazer larguras explicitamente especificadas.
se você especificar largura: 100%, a largura total do elemento será 100% do bloco que o contém mais qualquer margem horizontal, preenchimento e borda.
Então, da próxima vez que você definir a largura de um elemento de nível de bloco para 100% para fazê-lo ocupar toda a largura disponível, considere se o que você realmente deseja é defini-lo como automático.
fonte
Largura 100%: fará o conteúdo com 100%. margem, borda, preenchimento serão adicionados a essa largura e o elemento irá estourar se algum desses for adicionado.
Largura automática: Vai caber o elemento no espaço disponível, incluindo margem, borda e preenchimento. o espaço restante após o ajuste de margem + preenchimento + borda ficará disponível largura / altura.
Largura 100% + tamanho da caixa: caixa de borda: Ele também vai caber o elemento no espaço disponível, incluindo borda, preenchimento (a margem fará com que ele transborde o contêiner).
fonte
Usando largura: automático; + display: bloco embutido; em css dando um efeito incrível.
fonte
Quando dizemos
largura nunca excederá a largura total do elemento pai. A largura máxima é a largura do pai. Mesmo se adicionarmos borda, preenchimento e margem, o conteúdo do próprio elemento se tornará menor para dar espaço para borda, preenchimento e margem. Caso o espaço necessário para borda + preenchimento + margem seja maior que a largura total do elemento pai, a largura do conteúdo se tornará zero.
Quando dizemos
largura do conteúdo do elemento se tornará 100% do elemento pai e, a partir de agora, se adicionarmos borda, preenchimento ou margem, isso fará com que o elemento filho exceda a largura do elemento pai e começará a transbordar do elemento pai.
fonte