CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
其他回答
当涉及到子节点时,有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
在这种情况下,没有divs是可见的。但如果你这样写:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
然后子div将可见,而父div将不显示。
如果可视性属性设置为“hidden”,浏览器仍然会在页面上为内容占用空间,即使它是不可见的。 但是当我们将一个对象设置为“display:none”时,浏览器不会在页面上为其内容分配空间。
例子:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
查看详细信息
这里有很多详细的答案,但我认为我应该加上这一点来解决可访问性问题,因为其中有影响。
显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。
这个问题还问了同义词。indent: -9999 px;是另一个大致相等的。文本缩进的重要区别在于它通常由屏幕阅读器读取。这可能是一个有点糟糕的体验,因为用户仍然可以点击链接。
对于可访问性,我现在看到的是一种样式的组合,在对屏幕阅读器可见的情况下隐藏元素。
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
一个很好的做法是创建一个“跳转到内容”链接到内容主体的锚。视力受损的用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签就可以访问链接。
有关可访问性和隐藏内容的更多信息,请参见:
https://webaim.org/techniques/css/invisiblecontent/ https://webaim.org/techniques/skipnav/
显示:没有;既不会显示元素,也不会在页面上为元素分配空间,而可见性:隐藏;不会在页面上显示元素,但会在页面上分配空间。 在这两种情况下,我们都可以访问DOM中的元素。 为了更好地理解它,请查看以下代码: 显示:无vs可见性:隐藏
它们不是同义词。
Display:none将元素从页面的正常流程中移除,允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中,这样仍然会占用空间。
想象一下,你正在游乐园排队,排队的人非常吵闹,保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。
与此类似的情况相比,如果你前面有人穿上了隐形斗篷。在观看这条线时,它看起来像有一个空白的空间,但人们无法真正填补那个空白,因为有人仍然在那里。这就像可见性:隐藏。