Question

是有效/合法的css设置高度为0以达到与display：none相同的效果吗？

.item {
   height: 0;
   overflow: hidden;
 }

小提琴：https://jsfiddle.net/L0o1spko/

Answer 1

它有效，但不一样。如果你有一个固定的元素（例如），它将仍然显示，除非你将其父元素设置为display:none：

https://jsfiddle.net/L0o1spko/1/

.item1 {
  height: 0;
  overflow: hidden;
}

.fixed { position:fixed;}

.item2 {
  display: none;
}

<div class="item1">
    This content has a height of 0.
    <div class="fixed">
        sdfsdffsfsdf
    </div>
</div>

<div class="item2">
    This content has a display of none.
    <div class="fixed">
        sdfsdffsfsdf
    </div>
</div>

Answer 2

将高度设置为0完全有效，可用于许多内容，例如您的内容和＃34;滑入的动画。从无到有。这个概念没有任何问题，你可能经常需要它。

但是，如果我是你，我会质疑你为什么要使用它而不是显示无？如果它只是隐藏一个项目，那么它实际上是以语义方式错误的，如果可以，你应该避免这样做。另一方面，如果你有一个类似于我之前的解释的充分理由，那就去吧，它没有任何问题。

Answer 3

这是合法的，但您可能还想设置position: absolute以及visibility: hidden，以便它不会占用任何空间或其中任何一个孩子或内容显示在屏幕上。

CSS：有效将高度设置为0？

3 个答案: