@KennyTM: eso asumiendo que OP solicita específicamente comparar esos valores respectivos de cada propiedad.
BoltClock
Respuestas:
111
La visibilitypropiedad solo le dice al navegador si debe mostrar un elemento o no. Es visible ( visiblepuede verlo) o invisible ( hiddenno puede verlo).
La displaypropiedad le dice al navegador cómo dibujar y mostrar un elemento, si es que lo hace, si debe mostrarse como un inlineelemento (es decir, fluye con texto y otros elementos en línea) o un blockelemento de nivel (es decir, tiene propiedades de alto y ancho que se puede establecer, es flotante, etc), o un inline-block(es decir, actúa como una caja de bloque, pero se puso en línea en lugar) y algunos otros ( list-item, table, table-row, table-cell, flex, etc).
Cuando establece un elemento en, display: blockpero también lo establece visibility: hidden, el navegador aún lo trata como un elemento de bloque, excepto que simplemente no lo ve. Algo así como apilar una caja roja encima de una caja invisible: la caja roja parece flotar en el aire cuando en realidad está encima de una caja física que no se puede ver.
En otras palabras, esto significa que los elementos displayque no nonelo son todavía afectarán el flujo de elementos en una página, independientemente de si son visibles o no. Los cuadros que rodean un elemento con display: nonese comportarán como si ese elemento nunca hubiera estado allí (aunque permanece en el DOM).
.. no tiene nada que ver la pantalla con el DOM? por ejemplo ... si lo ha hecho display: none;, ¿ese elemento se elimina del DOM? o estoy totalmente confundido?
Hristo
3
@Hristo: En realidad, no es así. Puede no afecta a la posición o la presencia de un elemento en el DOM con CSS solo.
BoltClock
@BoltClock ... sí, tienes razón. Me he dado cuenta de que nunca se puede quitar un elemento del DOM, sino que solo afecta la forma en que se muestra con respecto al DOM. ¿Suena más exacto?
Hristo
Una cosa importante a tener en cuenta es que al usar el método hide () de jQuery, que internamente establece display en none, no puede obtener la posición de este elemento. Mientras usa la visibilidad, puede hacerlo.
p0rsche
21
visibilidad: oculta;
el elemento no se pintará Y no recibirá eventos de clic / toque, pero el espacio que ocupa todavía está ocupado
debido a que todavía está allí para propósitos de diseño, puede medirlo sin que sea visible
cambiar el contenido aún costará tiempo para redistribuir / diseñar la página
la visibilidad se hereda, por lo que esto significa que puede hacer visibles a los subhijos dándoles visibilidad: visible;
pantalla: ninguna;
hará que el elemento no participe en el flujo / diseño
puede (dependiendo del navegador utilizado) eliminar películas Flash e iframes (que se reiniciarán / recargarán al mostrarse nuevamente), aunque puede evitar que esto suceda con iframes
el elemento no ocupará ningún espacio. para propósitos de diseño, es como si no existiera
hará que algunos navegadores / dispositivos (como el iPad) recuperen directamente la memoria utilizada por ese elemento, lo que provocará pequeñas interrupciones si cambia entre ningún valor y otro durante las animaciones
notas adicionales:
imágenes en contenido oculto: en todos los navegadores populares las imágenes siguen cargadas, aunque estén dentro de cualquier elemento con visibilidad: ocultas; o mostrar: ninguno;
fuentes en contenido oculto: los navegadores webkit (Chrome / Safari) pueden retrasar la carga de fuentes personalizadas que solo se utilizan en elementos ocultos, incluso a través de la visibilidad o la visualización. Esto puede hacer que mida elementos que todavía usan una fuente alternativa hasta que se cargue la fuente personalizada.
pantalla: ninguna; eliminará el estilo visual / espacio físico de los elementos DOM del DOM, mientras que la visibilidad: oculta; no eliminará el elemento, simplemente lo ocultará. Entonces, un div que ocupa 300px de espacio vertical en su DOM TODAVÍA ocupará 300px de ancho vertical cuando se establezca en visibilidad: oculto; pero cuando se configura para mostrar: ninguno; sus estilos visuales y el espacio que ocupa se ocultan y luego el espacio se "libera" por falta de una palabra mejor.
[EDITAR] - Hace un tiempo que escribí lo anterior, y si no estaba lo suficientemente informado o si no tenía un mal día, no lo sé, pero la realidad es que el elemento NUNCA se elimina de la jerarquía DOM. Todos los 'estilos' de visualización de nivel de bloque están completamente 'ocultos' cuando se utiliza display: none, mientras que con visibilidad: hidden; el elemento en sí está oculto pero aún ocupa un espacio visual en el DOM. Espero que esto aclare las cosas
Respuestas:
La
visibilitypropiedad solo le dice al navegador si debe mostrar un elemento o no. Es visible (visiblepuede verlo) o invisible (hiddenno puede verlo).La
displaypropiedad le dice al navegador cómo dibujar y mostrar un elemento, si es que lo hace, si debe mostrarse como uninlineelemento (es decir, fluye con texto y otros elementos en línea) o unblockelemento de nivel (es decir, tiene propiedades de alto y ancho que se puede establecer, es flotante, etc), o uninline-block(es decir, actúa como una caja de bloque, pero se puso en línea en lugar) y algunos otros (list-item,table,table-row,table-cell,flex, etc).Cuando establece un elemento en,
display: blockpero también lo establecevisibility: hidden, el navegador aún lo trata como un elemento de bloque, excepto que simplemente no lo ve. Algo así como apilar una caja roja encima de una caja invisible: la caja roja parece flotar en el aire cuando en realidad está encima de una caja física que no se puede ver.En otras palabras, esto significa que los elementos
displayque nononelo son todavía afectarán el flujo de elementos en una página, independientemente de si son visibles o no. Los cuadros que rodean un elemento condisplay: nonese comportarán como si ese elemento nunca hubiera estado allí (aunque permanece en el DOM).fuente
display: none;, ¿ese elemento se elimina del DOM? o estoy totalmente confundido?visibilidad: oculta;
pantalla: ninguna;
notas adicionales:
fuente
display: none elimina el elemento del flujo del html mientras que visibilidad: hidden no lo hace.
fuente
pantalla: ninguna; eliminará el estilo visual / espacio físico de los elementos DOM del DOM, mientras que la visibilidad: oculta; no eliminará el elemento, simplemente lo ocultará. Entonces, un div que ocupa 300px de espacio vertical en su DOM TODAVÍA ocupará 300px de ancho vertical cuando se establezca en visibilidad: oculto; pero cuando se configura para mostrar: ninguno; sus estilos visuales y el espacio que ocupa se ocultan y luego el espacio se "libera" por falta de una palabra mejor.
[EDITAR] - Hace un tiempo que escribí lo anterior, y si no estaba lo suficientemente informado o si no tenía un mal día, no lo sé, pero la realidad es que el elemento NUNCA se elimina de la jerarquía DOM. Todos los 'estilos' de visualización de nivel de bloque están completamente 'ocultos' cuando se utiliza display: none, mientras que con visibilidad: hidden; el elemento en sí está oculto pero aún ocupa un espacio visual en el DOM. Espero que esto aclare las cosas
fuente
display: noneva a no eliminar un elemento de la DOM. El elemento sigue ahí, simplemente no se muestra .