隐藏<div>的各种方法有哪些？

Question

对,我是CSS菜鸟.我试图整理隐藏div的各种方法.

例如:

display:none;
visibility:hidden;

还有更深奥的吗？

忘记JQuery,JavaScript,事件...我只是想知道各种CSS方式,有很多内容和子div的div最终会被隐藏？

我想要这个的原因是因为我在这里查看一些代码并且div是不可见的.为什么我不知道？它可能是父div中的某些东西.

div有各种各样的类,这个看起来像罪犯 -

.div-content {

    position: absolute;
    left: 70px;
    right: 0;
    top: 55px;
    bottom: 0;

    display: block;

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin: 0;

    /*width: 90%;*/

    background-image: none !important;
    background-color: #F8F7F7;

}

我通过评论进出各种其他课程,将其缩小到本课程.当这个类被注释掉时 - 我可以看到div.

Answer 1

几种可能性:

• display: none - 这将导致浏览器无法呈现它.它也会使屏幕阅读器完全消失,所以要小心.
• visibility: hidden - 这将导致浏览器呈现它,它将不可见,但会留下与元素大小相对应的空格.
• position: absolute并将其发送到一个荒谬的位置(例如,left: -99999px假设父级overflow未设置为auto或scroll). - 当您希望元素实际上不可见但仍然存在于源或DOM中时,此方法很有效.
• 设置width和height为0,并且确保overflow: hidden -与上述相同,该元件将是完全不可见的,但在DOM或源仍然存在.
• opacity: 0- visibility: hidden仅通过不同方式(即改变元素的实际不透明度)将实现相同的效果.

现在,这一切都取决于为什么你需要它.

• 你想让元素完全消失吗？display: none(并使其重新出现display: block)是您的选择.
• 你想要动画吗？与去opacity: 0或者width与height可能是一个更好的选择,也许有一些JavaScript.
• 希望屏幕阅读器可以访问它,但实际上不可见(例如,隐藏的图像标题？),position: absolute; left: -99999px效果很好.