Pode haber momentos nos que traballa no desenvolvemento de páxinas web que precisas "ocultar" áreas específicas de elementos por unha razón ou outra. Podería, por suposto, simplemente eliminar o (s) elemento (s) nas preguntas do marcado HTML , pero o que quere que quede no código, pero non se amosará na pantalla do explorador por calquera motivo (e revisaremos os motivos para faino en breve). Para manter un elemento no seu HTML, pero ocultalo para mostrar, recorrerá a CSS.
As dúas formas máis comúns de ocultar un elemento que está no HTML estarían usando as propiedades CSS para "amosar" ou "visibilidade". A primeira vista, estas dúas propiedades poden parecer moito máis que iguais, pero cada unha delas ten diferenzas distintas que debería ter en conta. Vexamos as diferenzas entre a visualización: ningunha e visibilidade: escondida.
Visibilidade
Usando o par de visibilidade da propiedade / valor CSS: oculta agocha un elemento do navegador. Non obstante, ese elemento oculto aínda ocupa espazo no deseño. É coma se basicamente fixera o elemento invisible, pero aínda permanece no lugar e ocupa o espazo que tería tomado se fose deixado só.
Se coloca un DIV na túa páxina e usa CSS para darlle dimensións para ocupar 100x100 píxeles, a visibilidade: a propiedade escondida fará que o DIV non se amose na pantalla, pero o texto que segue funcionará coma se aínda estivese alí, respectando ese Espazo de 100x100.
Honestamente, a propiedade de visibilidade non é algo que usamos con moita frecuencia e, por suposto, non por si só. Se tamén estamos a usar outras propiedades de CSS como o posicionamento para conseguir o deseño que desexamos para un determinado elemento, entón poderiamos usar a visibilidade para ocultar ese elemento inicialmente, só para "activalo" de novo. Ese é un posible uso desta propiedade, pero, de novo, non se trata de algo con todo frecuencia.
Mostrar
A diferenza da propiedade de visibilidade, que deixa un elemento no fluxo normal de documentos, mostra: ningún elimina completamente o elemento do documento. Non ocupa ningún espazo, aínda que o código HTML aínda está no código fonte. Isto é porque está, de feito, eliminado do fluxo do documento. Para todos os efectos, o elemento desapareceu. Isto pode ser algo bo ou malo, dependendo do que sexan as túas intencións. Tamén pode ser prexudicial para a túa páxina se usa mal esta propiedade.
A miúdo usamos "display: none" ao probar unha páxina. Se necesitamos un espazo para "desaparecer" un pouco para que poidamos probar outras áreas da páxina, podemos usar a pantalla: nada para iso. O que hai que lembrar, con todo, é que o elemento se devolva de novo á páxina antes do lanzamento real dese sitio. Isto ocorre porque os motores de busca ou os lectores de pantalla non ven un elemento que se elimina do fluxo de documentos neste método, aínda que poida permanecer no marcado HTML. No pasado, este método foi usado como un método de sombreiro negro para intentar influenciar os rankings dos buscadores, polo que os elementos que non se mostran poden ser unha bandeira vermella para que Google examine por que se usa ese enfoque.
Unha das formas que atopamos é a visualización: ninguén para ser útil e onde o utilizamos en directo, sitios de produción, é cando estamos construíndo un sitio de resposta que pode ter elementos dispoñibles para un tamaño de pantalla, pero non para outros. Podes usar a visualización: nengunha para ocultar ese elemento e despois volvelo a encender con consultas multimedia máis tarde. Este é un uso aceptable da visualización: ningún, porque non está a tentar ocultar nada por motivos nefarios, pero ten unha necesidade lexítima de facelo.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 3/3/17