Question

是的，我是CSS菜鸟。我正在尝试整理隐藏div的各种方法。

例如：

display:none;
visibility:hidden;

还有更深奥的吗？

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

我想要这个的原因是因为我在这里查看一些代码并且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或{{1 }}。） - 当您希望元素实际上不可见但仍然存在于源或DOM中时，这很有效。
将scroll和width设置为0，并确保height - 与上述相同，该元素将完全不可见，但仍存在于DOM中或来源。
overflow: hidden - 仅通过不同的方法（即更改元素的实际不透明度）才能达到opacity: 0的相同效果。

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

你想让元素完全消失吗？ visibility: hidden {并使其与display: none重新出现）是您的选择。
你想要动画吗？使用display: block或opacity: 0＆amp; width可能是一个更好的选择，也许使用一些JavaScript。
希望屏幕阅读器可以访问它，但实际上不可见（例如，隐藏的图像标题？），与height一起使用效果很好。

Answer 2

虽然不是一个好习惯，但你可以使用

opacity:0

Answer 3

我不知道为什么你会问这样的问题，但这是另一种隐藏元素的方法：

element.style {
    width: 0px;
    height: 0px;
    overflow: hidden;
}

Answer 4

另一个：

element.style {
    position: absolute;
    left: -10000000px;
}

隐藏<div>的各种方法是什么？</div>

4 个答案: