@KennyTM: isso pressupõe que o OP está pedindo especificamente para comparar os respectivos valores de cada propriedade.
BoltClock
Respostas:
111
A visibilitypropriedade apenas diz ao navegador se deve mostrar um elemento ou não. É visível ( visible- você pode ver) ou invisível ( hidden- você não pode ver).
A displaypropriedade diz ao navegador como desenhar e mostrar um elemento, se for o caso - se ele deve ser exibido como um inlineelemento (ou seja, flui com texto e outros elementos embutidos) ou um blockelemento de nível (ou seja, tem propriedades de altura e largura que você pode definir, é floatable, etc), ou um inline-block(ou seja, ele age como um bloco caixa, mas é colocado em linha em vez) e alguns outros ( list-item, table, table-row, table-cell, flex, etc).
Quando você define um elemento como display: blockmas também define visibility: hidden, o navegador ainda o trata como um elemento de bloco, exceto que você simplesmente não o vê. É como empilhar uma caixa vermelha em cima de uma caixa invisível: a caixa vermelha parece que está flutuando no ar, quando na realidade está em cima de uma caixa física que você não pode ver.
Em outras palavras, isso significa que os elementos displayque não noneestão ainda afetarão o fluxo de elementos em uma página, independentemente de estarem visíveis ou não. As caixas ao redor de um elemento com display: nonese comportarão como se esse elemento nunca tivesse existido (embora permaneça no DOM).
.. não exibe tem algo a ver com o DOM? por exemplo ... se você tiver display: none;, esse elemento será removido do DOM? ou estou totalmente confuso?
Hristo
3
@Hristo: Na verdade, não. Você nunca pode afetar a posição ou a presença de um elemento no DOM apenas com CSS.
BoltClock
@BoltClock ... sim, você está certo. Percebi que você nunca pode retirar um elemento do DOM, mas apenas afetar a forma como ele é exibido em relação ao DOM. isso soa mais preciso?
Hristo
É importante observar que, usando o método hide () do jQuery, que define internamente a exibição como nenhum, você não pode obter a posição desse elemento. Ao usar a visibilidade, você é capaz de fazê-lo.
p0rsche de
21
visibilidade: oculto;
o elemento não será pintado E não receberá eventos de clique / toque, mas o espaço que ele ocupa ainda está ocupado
porque ainda está lá para fins de layout, você pode medi-lo sem estar visível
alterar o conteúdo ainda vai custar tempo de refluxo / layout da página
a visibilidade é herdada, então isso significa que você pode tornar os subchildren visíveis dando-lhes visibilidade: visible;
Mostrar nenhum;
fará com que o elemento não participe do fluxo / layout
pode (dependendo do navegador usado) matar filmes em Flash e iframes (que serão reiniciados / recarregados ao serem exibidos novamente), embora você possa evitar que isso aconteça com iframes
o elemento não ocupará nenhum espaço. para fins de layout, é como se não existisse
fará com que alguns navegadores / dispositivos (como o iPad) retomem diretamente a memória usada por aquele elemento, causando pequenos contratempos se você alternar entre nenhum e outro valor durante as animações
notas extras:
imagens em conteúdo oculto: em todos os navegadores populares as imagens ainda são carregadas, embora estejam dentro de qualquer elemento com visibilidade: oculto; ou exibir: nenhum;
fontes em conteúdo oculto: navegadores webkit (Chrome / Safari) podem atrasar o carregamento de fontes personalizadas que são usadas apenas em elementos ocultos, incluindo por meio de visibilidade ou exibição. Isso pode fazer com que você meça os elementos que ainda estão usando uma fonte substituta até que a fonte personalizada seja carregada.
Mostrar nenhum; irá remover o estilo visual / espaço físico dos elementos DOM do DOM, enquanto a visibilidade: oculto; não removerá o elemento, apenas o ocultará. Portanto, um div ocupando 300px de espaço vertical em seu DOM AINDA ocupará 300px de largura vertical quando definido como visibilidade: oculto; mas quando definido para exibir: nenhum; seus estilos visuais e o espaço que ocupa ficam ocultos e o espaço é então "liberado" por falta de palavra melhor.
[EDITAR] - Já faz um tempo que escrevi o texto acima, e se eu não tinha conhecimento suficiente ou estava tendo um dia ruim, não sei, mas a realidade é que o elemento NUNCA é removido da hierarquia DOM. Todos os 'estilos' de exibição de nível de bloco são completamente 'ocultos' ao usar display: none, enquanto com visibility: hidden; o próprio elemento está oculto, mas ainda ocupa um espaço visual no DOM. eu espero que isso esclareça as coisas
Respostas:
A
visibilitypropriedade apenas diz ao navegador se deve mostrar um elemento ou não. É visível (visible- você pode ver) ou invisível (hidden- você não pode ver).A
displaypropriedade diz ao navegador como desenhar e mostrar um elemento, se for o caso - se ele deve ser exibido como uminlineelemento (ou seja, flui com texto e outros elementos embutidos) ou umblockelemento de nível (ou seja, tem propriedades de altura e largura que você pode definir, é floatable, etc), ou uminline-block(ou seja, ele age como um bloco caixa, mas é colocado em linha em vez) e alguns outros (list-item,table,table-row,table-cell,flex, etc).Quando você define um elemento como
display: blockmas também definevisibility: hidden, o navegador ainda o trata como um elemento de bloco, exceto que você simplesmente não o vê. É como empilhar uma caixa vermelha em cima de uma caixa invisível: a caixa vermelha parece que está flutuando no ar, quando na realidade está em cima de uma caixa física que você não pode ver.Em outras palavras, isso significa que os elementos
displayque nãononeestão ainda afetarão o fluxo de elementos em uma página, independentemente de estarem visíveis ou não. As caixas ao redor de um elemento comdisplay: nonese comportarão como se esse elemento nunca tivesse existido (embora permaneça no DOM).fonte
display: none;, esse elemento será removido do DOM? ou estou totalmente confuso?visibilidade: oculto;
Mostrar nenhum;
notas extras:
fonte
display: none remove o elemento do fluxo do html, enquanto visibility: hidden não.
fonte
Mostrar nenhum; irá remover o estilo visual / espaço físico dos elementos DOM do DOM, enquanto a visibilidade: oculto; não removerá o elemento, apenas o ocultará. Portanto, um div ocupando 300px de espaço vertical em seu DOM AINDA ocupará 300px de largura vertical quando definido como visibilidade: oculto; mas quando definido para exibir: nenhum; seus estilos visuais e o espaço que ocupa ficam ocultos e o espaço é então "liberado" por falta de palavra melhor.
[EDITAR] - Já faz um tempo que escrevi o texto acima, e se eu não tinha conhecimento suficiente ou estava tendo um dia ruim, não sei, mas a realidade é que o elemento NUNCA é removido da hierarquia DOM. Todos os 'estilos' de exibição de nível de bloco são completamente 'ocultos' ao usar display: none, enquanto com visibility: hidden; o próprio elemento está oculto, mas ainda ocupa um espaço visual no DOM. eu espero que isso esclareça as coisas
fonte
display: noneirá não remover um elemento do DOM. O elemento ainda está lá, apenas não é exibido .