[英]CSS display:none and visibility:hidden
I have a div that I use to display alerts when needed. 我有一个div用于在需要时显示警报。
If I want to close it after a while can I use display:none or should I use display:none as well as visibility:hidden? 如果我想在一段时间后关闭它,我可以使用display:none或者我应该使用display:none以及visibility:hidden吗?
So one or both. 所以一个或两个。
Thank you. 谢谢。
Depends. 要看。 If you need the space to be left blank, that is, the space won't be taken up by other elements below or around it, you'll need
visibility: hidden
. 如果您需要将空格留空,即空间不会被其下方或周围的其他元素占用,则需要
visibility: hidden
。 Otherwise, use display: none
, which will allow other elements to move into the element's place. 否则,使用
display: none
,这将允许其他元素移动到元素的位置。
There's no reason to use both. 没有理由同时使用它们。
Visibility:hidden hides the element but it still takes up space in the layout. 可见性:隐藏隐藏元素但仍占用布局中的空间。 Display:none removes it completely.
显示:none完全删除它。
In your case, I would use Display:none 在你的情况下,我会使用Display:none
If your hidden content needs to be accessible—to those with screen readers, for example—then you should not use display: none
or visibility: hidden
, as both can potentially hide content from screen readers. 如果您的隐藏内容需要被屏幕阅读器访问 - 例如 - 那么您不应该使用
display: none
或visibility: hidden
,因为两者都可能隐藏屏幕阅读器中的内容。 Instead, you should use a more accessible approach, such as moving the content off screen with a negative margin. 相反,您应该使用更易于访问的方法,例如使用负边距将内容移出屏幕。 See the following links for more information:
有关更多信息,请参阅以下链接:
456 Berea Street: Hiding with CSS: Problems and solutions 456 Berea Street:隐藏CSS:问题和解决方案
WebAIM Blog: Hiding content for screen readers WebAIM博客:隐藏屏幕阅读器的内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.